Javascript d3.js带正负值的堆叠条形图
我刚接触d3.js,试图构建一个堆叠条形图,其中沿x轴的每个刻度都有正值和负值,但我似乎不知道如何进行。我试图在修改示例时失败。我遇到了相同的问题。毕竟,我提出了以下解决方案:Javascript d3.js带正负值的堆叠条形图,javascript,html,d3.js,Javascript,Html,D3.js,我刚接触d3.js,试图构建一个堆叠条形图,其中沿x轴的每个刻度都有正值和负值,但我似乎不知道如何进行。我试图在修改示例时失败。我遇到了相同的问题。毕竟,我提出了以下解决方案: 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]
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项目中。您可以在此处直接查看d3barChart方法:
Cheers您可以设置(在本例中)线性刻度的范围。如果没有一个有效的例子,很难提供更多帮助。我至少可以在这里告诉你:如果每个元素都需要有两个可视化的值(正数和负数),你可以尝试使用类似的东西,或者如果每个元素都应该只有正数或负数,你可以过滤负数,使其在左边,而在右边保留正数。@cuckovic感谢你的帮助,这正是我所需要的!