带有负JSON数据的堆积条形图 [英] Stacked bar chart with negative JSON data

问题描述

我想实现堆叠条形图。
我的数据源是JSON数组。
数据可能为负数或正数。
我引用此链接

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

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

  var data = [[{y：3}，{y：6} -3}]，
 [{y：4}，{y：-2}，{y：-9}]，
 [{y：10} y：4}] 
] 
  

我有相同的数据，但在JSON数组中， / p>

  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格式的数据实现这个图。

解决方案

按频段类型分组。您的数据按设置进行分组 - 也就是说，在原始的每个颜色带中，它们被分组在数据数组中。在您的数据中，每个堆叠区域是数据数组中的一组对象。

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

  var initialData = [{x：abc，y1：3，y2：4，y3：10}，
 {x：abc2 ，y1：6，y2：-2，y3：-3}，
 {x：abc3，y1： 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 dx}））
 .rangeRoundBands（[margin，w- margin]，.1）
  

将它们放在一起，加上一些额外的值： http://jsfiddle.net/fLMAZ/1/

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

I am trying to implement stacked bar chart. My data source is JSON array. Data might be negative or positive. I am referencing this link

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

But the problem is the data used here like matrix type. like :

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

I have same data but in JSON array like :

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"}
           ]

Now my question is how I can implement this graph with JSON formatted data.

解决方案

In the example you linked, the original data is grouped by band type. Your data is grouped by set - that is, in the original each color band is grouped in the data array. In your data, each stack of bands is a group of objects in the data array.

If you want to reuse the original code, we need to translate the data (90 degrees) like so:

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]};
    });
});

Then, most of the original code can be used as-is.

Another part which you can adapt is the domain for the x-scale

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

The group names are hard coded, but you have them in your objects as "x".

Instead, we can automatically use the x value of each object as the label for each set:

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

Putting it all together, with some extra values: http://jsfiddle.net/fLMAZ/1/

The other option is to rewrite the code to bind the data as-is, but you will need to understand how the stacked bar chart is built and then adapt it to your original JSON.

这篇关于带有负JSON数据的堆积条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！