请参见我在jsfiddle上的示例。一个红色rect作为静态markdown存在。使用append方法附加第二个绿色rect。蓝色rect在哪里？您可以使用任何文档检查器看到蓝色rect已经插入到svg元素中，但它不可见。为什么？我尝试使用documentFragment将大量矩形插入SVG中，但它们都不可见。..
rect
svg
documentFragment
5vf7fwbs1#
看起来你必须帮助d3，告诉它rect是一个svg rect，而不是一些神话般的html rect元素。例如：
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中的一个bug。
lyfkaqu12#
在Robert Longson的帮助下，我做了一个工作示例on JSFiddle：
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") svg.node().appendChild(documentFragment);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <svg width="400px" height="400px"> <rect width="50" height="50" x="0" y="0" fill="red"></rect> </svg>
2条答案
按热度按时间5vf7fwbs1#
看起来你必须帮助d3，告诉它rect是一个svg rect，而不是一些神话般的html rect元素。例如：
不确定，但这可能是d3中的一个bug。
lyfkaqu12#
在Robert Longson的帮助下，我做了一个工作示例on JSFiddle：