2

これはかなり単純なD3の質問です。データをいくつかのサークルにバインドしています。データは次のとおりです。

var linedata = [{ x:10, y:20},{x:5, y:30}];

そしてここに円があります：

var line = d3.svg.line().x(function(d) {
    return x(d.x);
 }).y(function(d) {
    return y(d.y);
});
context.selectAll(".dot")
  .data(linedata).enter()
  .append("circle")
  .attr("class", "dot")
  .attr("cx", line.x())
  .attr("cy", line.y())
  .attr("r", 2);

ただし、一部のデータキーを使用するようにデータとコードを変更して、サークルにクラスがアタッチされるようにする場合は、次のようにします。

var mydata = [{ name: 'LHR', data: [{ x:10, y:20}, {x:5, y:15} ], { name: 'SFO', data : [{x:5, y:30}, {x:4, y:8}] }];

クラス属性を編集してデータキーを使用する方法を知っていますが、cx属性とcy属性を編集するにはどうすればよいですか？

context.selectAll(".dot")
  .data(mydata).enter()
  .append("circle")
  .attr("class", function(d) { return "dot " + d.name; })
  .attr("cx", line.x()) 
  .attr("cy", line.y())
  .attr("r", 2);

次のことを試しましたが、機能しません。

.attr("cx", function(d) { return line.x(d.data); })

これは、関数自体をcx属性に割り当てているようです。私は何が間違っているのですか？

4

2 に答える 2

2

mydata変数には}、メイン配列内のオブジェクトを閉じるためのデータ配列の後にがありません。多分それは問題ですか？

また、を渡すときに配列を渡しd.dataます。おそらく、渡すd.data[1]か、必要な配列項目を試してみてください。

編集::あなたはおそらく使用したいと思うでしょう.attr('cx', function(d, i) { return line.x(d.data[i]); }

于 2012-09-05T13:46:33.397 に答える
0

Alexの答えの助けを借りて、それを理解しました-配列項目を直接渡す必要があり、line関数をまったく使用しないでください。その代わり：

context.selectAll(".dot")
  .data(mydata).enter()
  .append("circle")
  .attr("class", function(d) { return "dot " + d.name; })
  .attr("cx", function(d,i) { return x(d.data[i].x); }) 
  .attr("cy", function(d,i) { return y(d.data[i].y); }) 
  .attr("r", 2);
于 2012-09-10T08:45:52.120 に答える