javascript - d3.js 路径 dom 元素

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" 不同的名称。如果我这样做，那么streamgraph将不再绘制。 这是为什么？

然后我想添加一个带有项目符号的图例，但它们不绘制。这些元素显示在我的网络检查器(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)

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

Answer 1

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

在 HTML 中也是如此 - 有一组特定的已定义元素名称，浏览器知道如何呈现。