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

Question

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

但是，我无法更改在特定位置生成的各个路径的属性。 我使用 .airport-arcs 来制作这些路径，并且我希望各个线条具有可变的“笔画宽度”或“颜色”。 我尝试了几种选择，例如：

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

您的代码中有两个错误：

1. 您没有选择您正在寻找的元素。选择类.airport-arcs 将返回包含所有路径的组。要单独操作路径，您需要像这样选择：

   var td = svg.selectAll(".airport-arcs path")
   

2. 您正在访问错误的属性。 .count 不是绑定到路径的数据的直接属性，而是机场对象的直接属性。 d.source.count 就是你要找的。​​p>

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

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); });