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 变量}在数据数组之后缺少 a 以关闭主数组中的对象。也许这是个问题？

此外，当您传递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 回答