从对象数组中绘制D3图表
[英]Drawing D3 chart from array of arrays of objects
问题描述
我有以下数据：
var dataset = [[[1, 2], [1, 4]], [[5, 6], [9, 11]], [[5, 2], [15, 20]]];
还有另一种颜色：
var color = ['#1f78b4', '#a6cee3', '#33a02c', '#b2df8a', '#b15928', '#ffff99',
'#6a3d9a', '#cab2d6', '#ff7f00', '#fdbf6f', '#e31a1c', '#fb9a99'];
我想在D3中构建一个点图，但是对于每个数据集[i]，这些点应具有不同的颜色。 在计算比例并绘制轴之后，我到达了最后一部分以绘制图表的点，这就是我得出的结论：
for (var n = 0; n < dataset.length; n++) {
svg.selectAll("circle")
.data(dataset[n])
.enter()
.append("circle")
.attr("id", n)
.attr("fill", color[n])
.attr("cx", function (d) {
return xScale(d[1]);
})
.attr("cy", function (d) {
return yScale(d[0]);
})
.attr("r", rad);
}
基本上，我想要的是针对“数据集”中的每个数据集合，这些点具有不同的颜色（例如，[[5]的[[1，2]，[1，4]]具有＃1f78b4颜色，6]，[9、11]]来显示下一个颜色。 但是，当我运行代码时，它仅从“数据集”中绘制第一个集合，而忽略了其他两个……有人遇到这样的问题吗？ 如何解决？
1 个解决方案
解决方案1
1 已采纳 2016-02-29 17:30:01
正如我在评论中所说：
尽管此处有一个显式循环，但嵌套选择更为合适。
<!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> </head> <body> <script> var dataset = [ [ [1, 2], [1, 4] ], [ [5, 6], [9, 11] ], [ [5, 2], [15, 20] ] ]; var color = ['#1f78b4', '#a6cee3', '#33a02c', '#b2df8a', '#b15928', '#ffff99', '#6a3d9a', '#cab2d6', '#ff7f00', '#fdbf6f', '#e31a1c', '#fb9a99' ]; var svg = d3.select('body') .append('svg') .attr('width', 300) .attr('height', 300); // set up some scales var x = d3.scale.linear().range([0, 300]).domain([0, 22]); var y = d3.scale.linear().range([0, 300]).domain([0, 22]); var g = svg.selectAll(".collection") //<-- group per outer array .data(dataset) .enter() .append("g") .attr("class", "collection"); g.selectAll("point") //<-- here the nest .data(function(d){ return d; //<-- this is your array of points }) .enter() .append("circle") .attr("class", "point") .attr("cx", function(d){ return x(d[0]); }) .attr("cy", function(d){ return y(d[1]); }) .attr("r", 5) .style("fill", function(d,i,j){ return color[j]; //<-- j in index of the group }) </script> </body> </html>
具有数组的对象的D3条形图
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.