d3.js 路径 dom 元素答案

【问题标题】：d3.js path dom elementd3.js 路径 dom 元素
【发布时间】：2014-08-03 20:04:00
【问题描述】：

我正在创建一个流图，使用来自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" 不同的名称。如果我这样做了，那么流图不再绘图。 为什么会这样？

然后我想添加一个带有项目符号的图例，但它们没有绘图。这些元素显示在我的网络检查器（萤火虫）中，但它们的图形表示不存在。我认为这可能是与 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，但我没有在那里找到答案。

【问题讨论】：

你不能只是组成你自己的元素名称，它们必须是 SVG 规范中定义的东西，例如path.
啊，我明白了。 svg.selectAll("circle")... 有效。谢谢！

标签： javascript dom svg d3.js

【解决方案1】：

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

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

【讨论】：