这应该是一个相当简单的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}] }];
我知道如何编辑class属性以使用数据键,但是如何编辑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属性。我做错了什么?
答案 0 :(得分:2)
您的mydata变量在数据数组之后缺少}
以关闭主数组中的对象。也许这是一个问题?
此外,当您通过d.data
时,您正在传递数组。也许尝试传递d.data[1]
或任何你想要的数组项。
编辑::您可能想要使用.attr('cx', function(d, i) { return line.x(d.data[i]); }