javascript - D3：根据数据点缩放图

Question

根据条形图的长度，我在缩放图表时遇到了一些麻烦。例如，在 jsfiddle 中，我无法在大小为 25 的数据点之外绘制条形图。我知道解决此问题的一种方法是使主体的宽度和高度更大。但我认为缩放整个图表会更有效率，这样一个条形就不会看起来异常大。

http://jsfiddle.net/NkkDC/

我在想，我必须在这里缩放“y”函数，但我不确定如何。

bars.on("click", clickEvent)
    .transition().duration(2000).delay(200)
    .attr("y", function(d, i) { return i * 20; })
    .attr("width", x)
    .attr("height", 20);

提前致谢 ：）

Answer 1

每次添加新值时，xScale 的输入域都会发生变化（因为您可以添加新的最大值），因此我们需要在重新渲染图表时重新计算 xScale。在渲染函数中移动 x-scale 的声明应该可以解决问题：

    var xScale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);

http://jsfiddle.net/NkkDC/1/