d3.js。如何将 documentFragment 附加到 SVG？

Question

请参阅我的示例 jsfiddle 。一个红色 rect 作为静态 Markdown 存在。第二个绿色 rect 使用 append 附加方法。蓝色rect在哪里？您可以使用任何文档检查器看到蓝色 rect 已插入到 svg 元素中，但它不可见。为什么？我尝试使用 documentFragment 将大量矩形插入到 SVG 中，但它们都不可见...

Answer 1

看来你必须通过告诉 d3 矩形是 svg rect 来帮助它。而不是一些神秘的 html 矩形元素。例如

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 中的错误。