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

Question

参见我在 jsfiddle. One red rect exists as static markdown. Second green rect is appended using append 方法上的示例。蓝色rect在哪里？您可以使用任何文档检查器看到蓝色 rect 已经插入到 svg 元素中，但它是不可见的。为什么？我尝试使用 documentFragment 将大量矩形插入 SVG，但它们都不可见...

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

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

d3.js. How to append documentFragment to SVG?

svg

documentfragment

d3.js