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

【问题标题】：Stacked bar chart with negative JSON data带有负 JSON 数据的堆积条形图
【发布时间】：2013-05-08 20:27:25
【问题描述】：

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

【问题讨论】：

我不确定我是否理解这个问题。您发布的任何代码块都可以在JSON 中表示。为什么您希望属性值是字符串而不是数字？
你也可以看看这个答案：stackoverflow.com/questions/15388481/…

标签： javascript json d3.js

【解决方案1】：

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

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

【讨论】：

哇……太完美了……正是我需要这个输出。非常感谢@minikomi，再添加一个......如果我想在每个堆栈上的鼠标悬停时显示堆叠值......有可能吗？？
是的 - 考虑使用 selection.on 添加鼠标悬停事件
你有关于@minikomi 的例子吗？？

【解决方案2】：

你有几个选择：

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

【讨论】：