Использование HTML вместо SVG в d3.js

Question

Я строю график в d3.js и добавляю почти 30-60 кругов вместе с 2 строками с каждым обновлением. Я обнаружил, что это замедляется в браузере, что вызывает значительные проблемы с производительностью.

Было бы лучше добавить html и использовать изображения внутри моего css вместо рисования кругов?

Кроме того, как я могу это сделать?

Answer 1

У меня есть несколько примеров использования D3.js с чистым HTML здесь:

• http://phrogz.net/js/d3-playground/#StockPrice_HTML
• http://phrogz.net/js/d3-playground/#BoxMullerDistribution_HTML
• http://phrogz.net/js/d3-playground/#MultiBars_HTML

Как вы можете видеть из кода, вы делаете это просто ... делая это. Создайте HTML-элементы, которые вы хотите по имени, и установите для них атрибуты или свойства CSS.

Например, для создания образа круга вы можете сделать:

var imgs = d3.select("body").selectAll("img").data(myData); 
imgs.enter().append("img").attr("src", "circle.png"); 
imgs.exit().remove(); 

А будет ли это быстрее, чем SVG ... вероятно, немного быстрее, но не намного. Я подозреваю, что ваш компьютер/браузер работает медленно, или вы можете сделать может делать что-то не так в вашем коде (например, случайно уничтожить и воссоздать определенные элементы). Однако, не видя примера вашей проблемы, мы можем только догадываться.