d3 js 线性比例尺位置和高度堆叠到多个图表

Question

我正在使用 Mike Bostock's example as a template and building on it. My bar chart here。

转换到堆叠版本后，我无法获得条形的 y 位置。较高的条形遮盖较小的条形。很可能是因为堆栈的 valueOffset 属性。我被这个问题困了好几天了。

Mike 示例的变化：

删除了堆积图中的组标签
线性刻度上的新 y 轴 y2。该轴的范围是从 0 到每年所有值总和的最大值 141。
为条的相对位置定义了新堆栈 stack_year。

相关代码：

// y2 definition
y2.domain([0, d3.max(dataByGroup_year, function(d) { return d.year_wise_sum; })]).range([height, 0]);

// calculates sum of all wins per year
dataByGroup_year.forEach(function(d) {
  var order = d.values.map(function(d) { return d.value; });
  d.year_wise_sum = d3.sum(order);
});

function transitionStacked() {
    var t = svg.transition().duration(750),
    g = t.selectAll(".group").attr("transform", "translate(0," + y0(y0.domain()[0]) + ")");
    g.selectAll("rect").attr("x", function(d) { return x(d.year); })
    .attr("y", function(d) { return height - y2(d.valueOffset); }) 
    .attr("height", function(d) { return height - y2(d.value); });
    g.selectAll(".group-label").text("");
}

y0 是用于多个图表的顺序尺度。 y1 是用于多个图表中每个图表的线性刻度。

Full HTML code at github

使用的数据：input file。我禁用了每个栏的提示。

更新：JSFIDDLE

非常感谢任何帮助！谢谢

Answer 1

这里有很多问题，我已经在这个fiddle中解决了：http://jsfiddle.net/henbox/wL9x6cjk/4/

部分问题是数据本身（根据我上面的评论）。有一些重复的值，这导致在正确计算 valueOffset 时出现问题（使用 d3.layout.stack）

我还对 transitionStacked 函数中每个 rect 的 y 和属性的计算方式做了一些更改。我改变了你的：

.attr("y", function(d) { 
    return height - y2(d.valueOffset); 
})

至：

.attr("y", function (d) {
    return y2(d.value + d.valueOffset) - height;
})

请注意，在应用缩放之前，您需要对 d.value 和 d.valueOffset 求和，以计算矩形的左上角位置。此外，您不需要重新计算 x 属性值，因为这在两个图表视图之间不会改变，所以我将其删除

我还删除了对 stack_year(dataByGroup_year); 的调用。这里不需要搭建堆栈布局，只是计算每年的最大总和。

最后，我还稍微整理了 y 轴定位，以便有足够的 space 用于 x 轴标签，并简化了堆叠视图中 group 元素的定位。我还将 x 轴移动到 svg 而不是 group，这简化了元素的定位

d3 js 线性比例尺位置和高度堆叠到多个图表

d3 js linear scale bar position and height in stacked to multiple charts

javascript

d3.js