0

我已经花费了足够的时间来修改堆积条形图示例，因此明智的做法是让另一双眼睛看看我做错了什么。修改后的示例位于js fiddle中。

我的主要变化是：

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); })

如您所见，条形图正在超出指定高度。

如果有人能告诉我我做错了什么，我将非常感激。我花了太多时间独自寻找。我确实认为我非常接近，因为图表显示的不是高度问题。

4

1 回答 1

4

还有一个你没有提到的变化：你的图表g现在被翻译到左上角而不是左下角，就像在原始图中一样。

在您提到的行周围更改以下两行将解决问题：

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

Demo

这就是我通常使用倒置比例进行这些计算的方式，例如y = d3.scale.linear().range([height, 0])：

倒比例计算

在这里，该点将S(y + y0)是更接近top或具有较低y值的点的值，并且height该条将是 =S(y0) - S(y + y0)或 = abs(S(y0+y) - S(y0))，以您认为更可口的为准。

然而，老实说，在我真正把它写下来之前，有很多试验和错误。然后我做了更多的试验和错误来找到解决方案，并说服自己这张图有帮助。

所以......你的里程可能会有所不同。:)

于 2013-11-06T21:43:18.437 回答