Question

我使用Mike Bostock's example作为模板并在其上构建。 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

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

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

我还对y函数中计算每个rect的{{1}}和属性进行了一些更改。我改变了你的想法：

transitionStacked

为：

.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的通话。您不需要在此构建堆栈布局，只需计算每年的最大总和。

最后，我还整理了y轴定位，以便为x轴标签留出足够的空间，并简化堆叠视图中stack_year(dataByGroup_year);元素的定位。我还移动了x轴以附加到group而不是svg，这简化了元素的定位

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

1 个答案: