Question

我正在尝试实施堆积条形图。我的数据源是JSON数组。数据可能是负数或正数。我正在引用此链接

http://bl.ocks.org/ZJONSSON/2975320

但问题是这里使用的数据就像矩阵类型。喜欢：

var data = [[{y:3},{y:6},{y:-3}],
            [{y:4},{y:-2},{y:-9}],
            [{y:10},{y:-3},{y:4}]
           ]

我有相同的数据，但在JSON数组中，如：

var data = [{x:"abc",  y1:"3",  y2:"4",  y3:"10"},
            {x:"abc2", y1:"6",  y2:"-2", y3:"-3" },
            {x:"abc3", y1:"-3", y2:"-9", y3:"4"}
           ]

现在我的问题是如何使用JSON格式的数据实现此图形。

Answer 1

在您关联的示例中，原始数据按波段类型分组。您的数据按设置分组 - 也就是说，原始数据色带在数据数组中分组。在您的数据中，每个磁带堆栈是数据数组中的一组对象。

如果你想重用原始代码，我们需要翻译数据（90度），如下所示：

var initialData = [{x:"abc",  y1:"3",  y2:"4",  y3:"10"},
                   {x:"abc2", y1:"6",  y2:"-2", y3:"-3" },
                   {x:"abc3", y1:"-3", y2:"-9", y3:"4"}]

var data = ["y1","y2","y3"].map(
    function(v){
      return initialData.map(function(d){
        return  {y: +d[v]};
    });
});

然后，大部分原始代码都可以按原样使用。

您可以调整的另一部分是x-scale的域

x = d3.scale.ordinal()
        .domain(['abc','abc2','abc3'])
        .rangeRoundBands([margin,w-margin], .1)

组名称是硬编码的，但您在对象中将它们设置为“x”。

相反，我们可以自动使用每个对象的x值作为每个集合的标签：

x = d3.scale.ordinal()
    .domain(initialData.map(function(d){return d.x}))
    .rangeRoundBands([margin,w-margin], .1)

将所有内容放在一起，加上一些额外的值：http://jsfiddle.net/fLMAZ/1/

另一个选项是重写代码以按原样绑定数据，但您需要了解堆积条形图的构建方式，然后将其调整为原始JSON。

Answer 2

您有几个选择：

是提供服务器端的数据，使其看起来像图形所喜欢的JSON结构。
您可以在客户端解析您的JSON并制作新的JSON
您可以修改图表图表，使其与JSON一起使用

带有负JSON数据的堆积条形图

2 个答案: