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

Question

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

Answer 1

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

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