0

我正在尝试实现堆叠条形图。我的数据源是 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 格式的数据来实现这个图。

4

2 回答 2

1

在您链接的示例中，原始数据按band type分组。您的数据按集合分组- 也就是说，在原始数据数组中，每个色带都分组。在您的数据中，每个波段堆栈都是数据数组中的一组对象。

如果你想重用原始代码，我们需要像这样翻译数据（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。

于 2013-05-09T02:43:24.347 回答
0

你有几个选择：

  1. 就是从服务器端提供数据，让它看起来像图喜欢的 JSON 结构。
  2. 您可以在客户端解析您的 JSON 并创建一个新的 JSON
  3. 您可以修改图表，使其适用于您的 JSON
于 2013-05-09T02:37:33.930 回答