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 条形.
我该怎么做 - 请记住,数据将在未来动态更新,因此将添加新数据对象并删除其他数据对象.猜猜我可以使用 id 作为密钥.
首先,将数据提供或转换为普通数组或数组例如
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 的 group bar 用作模型(我已经修复了他的版本以使用最新的 d3 库).在这里查看它的工作:http://bl.ocks.org/3532324
I have some data like this:
[
{ id: 12, value1: "2.92", value2: "4.22", value3: "3.69" }
,
{ id: 23, value1: "2.69", value2: "4.24", value3: "3.77" }
,
....
]
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.
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.
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] ]
Now you can use d3.transpose to pivot the data so you get
var tdata = d3.transpose(data);
gives you
[ [2.92, 2.69], [4.22, 4.24], [3.69, 3.77]]
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屋!