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

Question

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

Answer 1

看来您必须通过告诉 d3 rect 是svg rect而不是一些神话般的 html rect 元素来帮助 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 中的错误。