Basic D3.js：使用数据键？答案

【问题标题】：Basic D3.js: using data keys?Basic D3.js：使用数据键？
【发布时间】：2012-09-05 10:00:08
【问题描述】：

这应该是一个相当简单的 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 属性。我做错了什么？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您的 mydata 变量在数据数组后缺少 } 以关闭主数组中的对象。也许这是个问题？

另外，当您传递d.data 时，您正在传递一个数组。也许尝试传递 d.data[1] 或任何你想要的数组项。

编辑:: 你可能想使用.attr('cx', function(d, i) { return line.x(d.data[i]); }

【讨论】：

谢谢。我已经编辑了变量，所以这不是问题。我试过使用.attr('cx', function(d, i) { return line.x(d.data[i]); }，但这给出了错误：Error: Invalid value for <circle> attribute cx="function g(d){return d.length<1?null:"M"+e(a(cE(this,d,b,c)),f)}"。所以我仍然很困惑......这似乎是分配cx 函数文字而不是函数的返回值？
所以这就是问题所在：我不明白如何获取函数的值，而不是函数本身。默认情况下，D3 似乎对函数文字很满意（上面第一个代码中的.attr("cx", line.x())），所以我不完全理解为什么它对第二个示例中的一个不满意。

【解决方案2】：

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

【讨论】：

好点。回答完后，我注意到你根本不需要使用 line 功能。很高兴你成功了！