Question

我正在尝试在d3.js中创建一个包含3个“数据组”数据的条形图。我已经能够实现“让我们制作一个条形图”示例http://bost.ocks.org/mike/bar/2/中的示例，但我想知道如何使用二维数据集来实现它。

我有点艰难的时间绕着我认为应该是一个相当直接的过程（选择第一个2d数组的索引 - ＆gt;遍历该数组并在条形图中显示每个元素的值） - ＆gt;选择数组的第二个索引 - ＆gt;遍历该数组并以条形等显示每个元素的值...），因此非常感谢示例。

到目前为止的代码是：

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; });

但是我想将“data”变量更改为：

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]];

d3.js二维阵列条形图

0 个答案: