1

次のような配列があります。各項目は空港で、名前とフライト頻度で定義されています。

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()この呼び出しが正しく機能するかどうかはわかりません。それともそうなるでしょうか？必要に応じてデータを再構築できます。

4

1 に答える 1

0

それを理解しました-答えは、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); });​
于 2012-09-04T08:51:57.013 に答える