D3.js堆積條形圖

Question

我花了足夠的時間修改堆積的條形圖樣本 ，因此明智的做法是讓第二只眼睛看一下我做錯了什么。 修改后的示例位於js小提琴中 。

我的主要變化是：

1：在第10行上，將范圍y = d3.scale.linear().range([height, 0])的數組反轉

2：在第17和22行上添加軸

var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .tickFormat(format);
var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")

3：第62行更改了y0和y的加法（這可能會引起問題）

.attr("y", function (d) { return y(d.y) - y(d.y0); })

如您所見，條形圖超出指定高度。

如果有人可以告訴我我在做什么錯，我將非常感激。 我花了太多時間獨自看。 我確實認為，除了高度問題之外，圖表顯示的非常接近。

Answer 1

還有一個未提及的變化：您將包含g的圖表現在轉換為左上點，而不是原始繪圖中的左下點。

圍繞您提到的行更改以下兩行將解決此問題：

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

演示

這就是我通常以諸如y = d3.scale.linear().range([height, 0])類的反比例尺進行這些計算的方式：

在這里，點S(y + y0)將是更靠近top的點的值，或者是y值較低的點，並且條形的height將為= S(y0) - S(y + y0)或= abs(S(y0+y) - S(y0)) ，無論哪一個都更可口。

但是，老實說，在我實際記下來之前，需要進行大量的反復試驗。 然后，我進行了更多的嘗試和錯誤，以找到解決方案，並使自己確信該圖紙有所幫助。

所以...您的里程可能會有所不同。 :)