Javascript d3.js二维阵列条形图

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

我试图在d3.js中制作一个包含3组数据的条形图。我已经能够实现我们制作一个条形图示例中的示例,但是我想知道如何使用二维数据集来实现它

我觉得这应该是一个相当简单的过程——选择2d数组的第一个索引->遍历该数组并在条形图中显示每个元素的值->选择数组的第二个索引->遍历该数组并在条形图中显示每个元素的值,这让我有点为难。。。,因此,我们将非常感谢这些例子

迄今为止的守则是:

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]];
听起来像是你想要的。可能是