基本D3.js:使用数据键
Basic D3.js: using data keys?
这应该是一个相当简单的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属性。我做错了什么?
mydata变量在数据数组后缺少一个}
以关闭主数组中的对象。也许这是个问题?
此外,当您传递d.data
时,您正在传递一个数组。也许可以尝试传递d.data[1]
或您想要的任何数组项。
编辑::您可能想要使用.attr('cx', function(d, i) { return line.x(d.data[i]); }
在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);
相关文章:
- d3.hexbin插件-动态定义颜色域以适应数据
- 如何为d3.js图表输出组织/嵌套数据
- 添加新数据时D3.JS条形图列偏移量
- 将基本CSV数据加载到D3
- 具有关联数组数据集的D3.js表
- d3在数据更新时错误地附加了dom元素
- d3.csv有很多数据,只画了一个月
- 基本D3.js:使用数据键
- 基本D3.js:如何将具有其他属性的数据绑定到元素
- 如何在D3.js中绘制地图投影上的点,并使用范围滑块过滤数据
- 通过内部数组将JSON数据导入D3.js+Google Map
- 具有多个数据集的分组散点图D3
- 如何使用D3.js根据json中给出的数据在Heatmap中创建可变大小的矩形
- 基于数据d3.js绑定svg梯度
- 其中存储有数据d3
- 如何动态更改力布局图中的数据?D3.
- 将 MySQL 查询结果转换为分层数据 - D3
- 使用复选框过滤数据- D3
- 更新enter().append()块中的数据d3.js
- 同时转换xAxis和数据- D3.js