Question

我有一个看起来像这样的数组，其中每个项目都是机场，由其名称和航班频率定义：

var mydata = [
    {'name' : 'LHR', 'flights' : [ { x : 0, y : 1520 }, { x : 1, y : 1990 } ] },
    {'name' : 'SFO', 'flights' : [ { x : 0, y : 2090 }, { x : 1, y : 2170 } ] }
];

我想为数组中的每个条目绘制一条带有D3.js的行。我想将flights数据绑定到该行，并且我想给该行一个与name对应的类名，这样我最终得到的路径如下：

<path class="LHR" d="...flights data..."></path>
<path class="SFO" d="...flights data..."></path>

如何绑定数据并同时为该行提供类名？我可以这样做吗？

svg.selectall("path.line")
   .data(mydata, function(d) { return d.flights})
   .enter()
   .append("path")
   .attr("class", "line")
   .attr("class", function(d) { return d.name})
   .attr("d", line);

我不确定此data()的来电是否正常。或许它会？如果需要，我可以重构我的数据。

Answer 1

想出来 - 答案是在attr行进行函数调用，而不是data行：

svg.selectAll("path.line")
  .data(mydata)
  .enter()
  .append("path")
  .attr("class", function(d) { return 'line ' + d.name; })
  .attr("d", function(d) { return line(d.flights); });

基本D3.js：如何将数据与其他属性绑定到元素？

1 个答案: