When using d3 .html()
method, watch out for innerHTML support for SVG elements (not supported in safari, IE).
You can, however, use innerSVG polyfill for same effect. See https://code.google.com/p/innersvg/ for details. It just works.
Use it like this:
D3Selection.append("g").node().innerSVG = "<circle class=...";
Better approach could be to introduce method for nesting desired structure on provided d3 selected element and use that. Eg.:
function appendCircles(group) {
group.append("circle").attr("class", "circle1");
group.append("circle").attr("class", "circle2");
}