Javascript d3.js二维阵列条形图
我试图在d3.js中制作一个包含3组数据的条形图。我已经能够实现我们制作一个条形图示例中的示例,但是我想知道如何使用二维数据集来实现它 我觉得这应该是一个相当简单的过程——选择2d数组的第一个索引->遍历该数组并在条形图中显示每个元素的值->选择数组的第二个索引->遍历该数组并在条形图中显示每个元素的值,这让我有点为难。。。,因此,我们将非常感谢这些例子 迄今为止的守则是:Javascript d3.js二维阵列条形图,javascript,arrays,svg,d3.js,charts,Javascript,Arrays,Svg,D3.js,Charts,我试图在d3.js中制作一个包含3组数据的条形图。我已经能够实现我们制作一个条形图示例中的示例,但是我想知道如何使用二维数据集来实现它 我觉得这应该是一个相当简单的过程——选择2d数组的第一个索引->遍历该数组并在条形图中显示每个元素的值->选择数组的第二个索引->遍历该数组并在条形图中显示每个元素的值,这让我有点为难。。。,因此,我们将非常感谢这些例子 迄今为止的守则是: var data = [4, 8, 15, 16, 23, 42];*/ var width = Math.max(50
var data = [4, 8, 15, 16, 23, 42];*/
var width = Math.max(500, innerWidth), height = Math.max(500, innerHeight), barHeight = 80;
var x = d3.scale.linear().domain([0, d3.max(data)]).range([0, width]);
var chart = d3.select(".chart").attr("width", width).attr("height", barHeight * data.length * 3);
var bar = chart.selectAll("g").data(data).enter().append("g").attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect").attr("width", x).attr("height", barHeight - 1);
bar.append("text").attr("x", function(d) { return x(d) - 3; }).attr("y", barHeight / 2).attr("dy", ".35em").text(function(d) { return d; });
但是,我想将数据变量更改为:
var data = [[40,45,5],
[50,49,2],
[60,62,4],
[40,41,6],
[42,40,3],
[65,67,10],
[70,67,17],
[66,65,2],
[45,44,3],
[39,38,7],
[38,38,8],
[45,40,4],
[43,35,3],
[50,65,8],
[51,50,6]];
听起来像是你想要的。可能是