CODEWITHSUNDEEP
javascriptdomsvgd3.js
imrane
imrane

Reputation: 1542

Using HTML instead of SVG within d3.js

I'm building a graph in d3.js and appending almost 30-60 circles along with 2 lines with each refresh. I find that this is slowing down in the browser, causing significant performance issues.

Would it be better to append html and use images within my css instead of drawing circles?

Also, how would I go about doing this?

Upvotes: 2

Views: 4074

Answers (1)

Phrogz
Phrogz

Reputation: 303254

I have a few examples of using D3.js with pure HTML here:

As you can see from the code, you do this by just…doing it. Create the HTML elements you want by name and set either the attributes or CSS properties on them.

For example, to create an image of a circle you might do:

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

As for whether or not this will be faster than SVG…probably a little faster, but not by much. I suspect that either your computer/browser is slow, or you may be doing something wrong in your code (e.g. accidentally destroying and re-creating certain elements). Without seeing an example of your problem, however, we can only guess.

Upvotes: 4

Related Questions