d3.js. How to append documentFragment to SVG?

Question

See my example on jsfiddle. One red rect exists as static markdown. Second green rect is appended using append method. Where is blue rect? You can see with any document inspector that blue rect already inserted within svg element, but it is not visible. Why? I try to insert big amount of rectangles into SVG using documentFragment but they all are not visible...

score 5 · Accepted Answer · answered Sep 13 '15 at 19:37

5

It seems you have to help d3 by telling it the rect is an svg rect and not some mythical html rect element. E.g.

var svg = d3.select("svg");
svg.append("rect")
    .attr("width", 50)
    .attr("height", 50)
    .attr("x", 50)
    .attr("y", 0)
    .attr("fill", "green")
var documentFragment = document.createDocumentFragment();
d3.select(documentFragment).append("svg:rect")
    .attr("width", 50)
    .attr("height", 50)
    .attr("x", 100)
    .attr("y", 0)
    .attr("fill", "blue")
console.log(documentFragment);
svg.node().appendChild(documentFragment);

Not sure but this may be a bug in d3.

answered Sep 13 '15 at 19:37

Robert Longson

118,664
26
252
242

Wow, super! It works. But what means colon in `svg:rect`? – zeleniy Sep 13 '15 at 20:47
It means explicitly that the rect should be created in the SVG namespace, rather than d3 figuring it out for itself. – Robert Longson Sep 13 '15 at 21:02

score 0 · Answer 2 · answered Nov 12 '22 at 15:55

With the help of Robert Longson i did working example on JSFiddle:

var svg = d3.select("svg");
svg.append("rect")
    .attr("width", 50)
    .attr("height", 50)
    .attr("x", 50)
    .attr("y", 0)
    .attr("fill", "green")
var documentFragment = document.createDocumentFragment();
d3.select(documentFragment).append("svg:rect")
    .attr("width", 50)
    .attr("height", 50)
    .attr("x", 100)
    .attr("y", 0)
    .attr("fill", "blue")
svg.node().appendChild(documentFragment);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<svg width="400px" height="400px">
    <rect width="50" height="50" x="0" y="0" fill="red"></rect>
</svg>

d3.js. How to append documentFragment to SVG?

2 Answers2