Question

我正在使用http://bl.ocks.org/mbostock/4060954中的示例代码作为模板创建流图。

我绘制了流图：

var svg = d3.select("#graph_area").append("svg") 
    .attr("width", width)
    .attr("height", height)

....

svg.selectAll("path")  
    .data(layers) 
.enter().append("path")  
    .attr("d", function (d) {return area(d.layer);})

现在似乎我不允许在这里为DOM元素选择"path"的其他名称。如果我这样做，那么流程图不再是情节。 为什么？

然后我想用子弹添加一个图例，但它们没有绘图。元素显示在我的Web检查器（firebug）中，但它们的图形表示不存在。我认为它可能与DOM元素名称有类似的问题，但我实际上并不知道。这是我的子弹的代码：

//draw all the legend bullets and effects
svg.selectAll("bullets")  
    .data(layers)  
.enter().append("bullets")  
    .attr("cx", 200)
    .attr("cy", function(d, i) { return 20 + i*10; })
    .style("fill", function(d) { return d.color; })
    .attr("r", 5)

我简要地查看了路径here和here的API，但我没有在那里找到答案。

Answer 1

您可以使用的元素名称在SVG specification中定义。这是一个特定的集合（例如path，circle） - 使用其他任何东西都可以将元素附加到DOM，但浏览器不知道如何解释和渲染它

它与HTML中的方式相同 - 浏览器知道如何呈现一组特定的已定义元素名称。

d3.js路径dom元素

1 个答案: