D3：从json对象创建一个分组的条形图 [英] D3: Create a grouped bar chart from json objects

问题描述

我有这样的数据：

[
 { id: 12, value1: "2.92", value2: "4.22", value3: "3.69" }
, 
 { id: 23, value1: "2.69", value2: "4.24", value3: "3.77" }
,
  ....
]

我想创建一个水平分组的条形图，所以有3组条，首先是所有的value1条（标记为Value1），其次是所有的value2条，最后是所有的value3条。

I want to create a horizontal grouped bar chart, so that there are 3 groups of bars, first all value1 bars (labeled as Value1), followed by all value2 bars and finally all value3 bars.

这一点，记住数据将在未来动态更新，因此将添加新的数据对象，其他将被删除。猜猜我可以使用id作为键。

How can I do this - keeping in mind that the data will be updated dynamically in the future, so new data objects will be added and others will be removed. Guess I could use id as a key.

推荐答案

首先，提供或转换数据到一个普通的数组
eg

First, supply or convert the data to an ordinary array or arrays eg

data = [ [ 2.92, 4.22, 3.69], [2.69, 4.24, 3.77] ]

现在，您可以使用d3.transpose旋转数据以获得

Now you can use d3.transpose to pivot the data so you get

  var tdata = d3.transpose(data);

给您

   [ [2.92, 2.69], [4.22, 4.24], [3.69, 3.77]]

然后这里是一个组栏从iaindillingham用作模型（我已经修复他的版本使用最新的d3库）。请参阅此处： http://bl.ocks.org/3532324

then here is a group bar from iaindillingham to use as a model (I've fixed his version to use the latest d3 library). See it working here: http://bl.ocks.org/3532324

这篇关于D3：从json对象创建一个分组的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！