javascript - D3：从 json 对象创建分组条形图

Question

我有一些这样的数据：

[
 { 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 条形图。

我该如何做到这一点 - 请记住，数据将在未来动态更新，因此将添加新数据对象并删除其他数据对象。猜猜我可以使用 id 作为键。

Answer 1

首先，将数据提供或转换为一个或多个普通数组，例如

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

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

  var tdata = d3.transpose(data);

给你

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

然后这里有一个来自 iaindillingham 的组栏，用作模型（我已经修复了他的版本以使用最新的 d3 库）。看到它在这里工作：http: //bl.ocks.org/3532324