使用d3.js制作带有正负值的堆积条形图

Question

我对d3.js不熟悉，尝试创建一个堆积条形图，在x轴的每个刻度上会有正值和负值，但是我无法弄清如何操作。我试图修改http://bl.ocks.org/mbostock/1134768 的示例，但没有成功。

- somecallmemike

---

你可以设置（在这种情况下）线性比例尺的域。如果没有工作示例，很难提供更多帮助。至少我可以指向这里：https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_domain - Marc

如果每个元素需要显示两个值（正值和负值），您可以尝试使用类似 http://jsfiddle.net/cuckovic/hwDt3/ 的东西，或者如果每个元素只应具有正值或负值，则可以将负值筛选到左侧并保留正值在右侧。 - cuckovic

@cuckovic，谢谢你提供的代码片段，正是我所需要的！ - Hamatti

Answer 1

我遇到了同样的问题。最终，我得出了以下解决方案:

data.forEach(function (d) {
   var newD = {x: d[xcoord]};
   var y0neg = 0;
   var y0pos = 0;
   newD.values = color.domain().map(function (m) {
       if (d[m] > 0)
           return { name: m, y0: y0pos, y1: y0pos += +d[m] };
       else {
           var y1 = y0neg;
           return { name: m, y0: y0neg += d[m], y1: y1 };
       } 
   });
   newD.totalPositive = d3.max(newD.values, function (v) { return v.y1});
   newD.totalNegative = d3.min(newD.values, function (v) { return v.y0 });
   arranged.push(newD);
});

这是安排数据的方式。我认为变量d保存给定x坐标下每个项目的值。数据集合是一个值列表，例如：

{
    'xcoord':'january',
    'gains': 100,
    'otherGains':20,
    'loses': -50
}

要显示的项目名称必须映射到域，然后对于每个月份，我们必须聚合数据。对于给定月份中的每个项目，我都有一个y0和y1坐标。为了获得正确的y0和y1坐标，我们必须分别计算负值和正值的计数器。然后以这种方式绘制数据：

state.selectAll("rect")
    .data(function (d) { return d.values; })
  .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function (d) { return y(d.y1); })
    .attr("height", function (d) { return y(d.y0) - y(d.y1); })
    .style("fill", function (d) { return color(d.name); });

我已经在我的KoExtensions项目https://github.com/hoonzis/KoExtensions中添加了堆叠条形图，您可以直接在此处检查d3barChart方法：https://github.com/hoonzis/KoExtensions/blob/master/charting.js。

干杯

- hoonzis