d3.js. Как добавить documentFragment в SVG?

Question

Смотрите мой пример на jsfiddle. Один красный rect существует как статическая уценка. Второй зеленый rect добавляется с помощью метода добавления. Где синий rect? Вы можете увидеть с любым инспектором документов, что синий rect уже вставлен в svg элемент, но это не видно. Зачем? Я пытаюсь вставить большое количество прямоугольников в SVG, используя documentFragment но они все не видны...

Answer 1

Кажется, вы должны помочь d3, сказав, что rect это svg rect, а не какой-то мифический html rect элемент. Например

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);

Не уверен, но это может быть ошибкой в ​​d3.

Answer 2

С помощью Роберта Лонгсона я сделал рабочий пример на JSFiddle: