d3 voronoi arc Map - .arcs 的控制属性

Question

我正在使用 voronoi arc map 示例 http://bl.ocks.org/mbostock/7608400 我可以成功地可视化我的进出口贸易数据集。

但是我无法更改在特定位置生成的各个路径的属性。我使用 .airport-arcs 来创建这些路径，并且我希望每个行的变量 "stroke-width" 或 "color" 。我尝试了几种选择，例如：

var color = d3.scale.category20();
...       
var td = svg.selectAll(".airport-arcs")
td.style("stroke", function(d) { return color(d.count); });
td.attr("stroke-width", function(d) { return Math.log(d.count); });

这似乎以相同的数量更改所有笔画宽度，而在给定位置生成的所有链接的颜色都不同（但不同位置之间不同）。关于如何更改各个路径的属性有什么建议吗？

Answer 1

您的代码中有两个错误：

您没有select正在寻找的元素。选择 class .airport-arcs 将 return 包含所有路径的组。要单独操作路径，您需要像这样 select：
```
var td = svg.selectAll(".airport-arcs path")
```
您访问错误属性。 .count 不是绑定到路径的数据的直接属性，而是机场对象的直接属性。 d.source.count 就是您要找的。

您更正后的代码如下所示：

var color = d3.scale.category20();

var td = svg.selectAll(".airport-arcs path")
td.style("stroke", function(d) { return color(d.source.count); });
td.attr("stroke-width", function(d) { return Math.log(d.source.count); });

d3 voronoi arc Map - .arcs 的控制属性

d3 voronoi arc Map - control attributes of the .arcs

html

javascript

dictionary

selectall

d3.js