Question

I tried:

var pattern = d3.select("#container").append("svg:pattern");
pattern.append("svg:defs") ... //and so on

but ran into errors on append("svg:pattern") so I assume that is not implemented in d3 yet.

My solution was to simply run the SVG code outside of d3 which worked fine since I did not need the power of d3 for this piece. (I realized I could have attached a .data(dataset) to an SVG object and looped through it to create it, but that would have been a lot of d3 effort for no reason.)

This is a sanity-check question: Did I miss something in trying to implement an svg pattern in d3, or was my solution the correct approach?

(Thank you Mike Bostock for such an incredible library.)

Answer 1

D3 is more or less agnostic to what you’re dong with it — you can generate SVG, HTML, whatever. There’s no reason why SVG patterns wouldn’t work. From the little code you’ve posted it looks like you might be trying to append the pattern to an HTML element. You’ll have to create the SVG and the defs element before starting to define the pattern.