d3.js。如何将 documentFragment 附加到 SVG?
d3.js. How to append documentFragment to SVG?
参见我在 jsfiddle. One red rect
exists as static markdown. Second green rect
is appended using append 方法上的示例。蓝色rect
在哪里?您可以使用任何文档检查器看到蓝色 rect
已经插入到 svg
元素中,但它是不可见的。为什么?我尝试使用 documentFragment
将大量矩形插入 SVG,但它们都不可见...
看来您必须通过告诉 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 中的错误。
参见我在 jsfiddle. One red rect
exists as static markdown. Second green rect
is appended using append 方法上的示例。蓝色rect
在哪里?您可以使用任何文档检查器看到蓝色 rect
已经插入到 svg
元素中,但它是不可见的。为什么?我尝试使用 documentFragment
将大量矩形插入 SVG,但它们都不可见...
看来您必须通过告诉 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 中的错误。