【问题标题】:D3: Create a grouped bar chart from json objectsD3:从 json 对象创建分组条形图
【发布时间】:2012-08-29 14:20:05
【问题描述】:

我有一些这样的数据:

[
 { 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 作为键。

【问题讨论】:

    标签: javascript json charts d3.js


    【解决方案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

    【讨论】:

    • 感谢您的回答!我会试试的。您的方法在更新图表数据时是否有效?
    • 我现在以您的工作示例为基础。如何向现有图表添加新系列?
    • 试试这个页面,needforair.com/blog/2012/05/09/d3-tutorial 你需要进入和退出来为每次更新添加/删除数据。
    • 有谁知道为什么我们需要先转置数据(也就是说,为什么d3.layout.stack() 会这样工作)?看起来堆叠的东西是属于原始类别的数据点,所以我不确定为什么需要中间步骤。速度?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多