D3：如何在数据的最小/最大值和轴的最小/最大值之间增加边距？

Question

如何在最小/最大值和我的最小/最大轴值之间添加一些空间？

这里是小提琴https://jsfiddle.net/ftgbhyqj/21/。

如您所见，最小值和最大值始终用于y轴上的最小值/最大值。如何在数据的最大值和y轴的最大值之间添加一些额外的空间，例如可用高度的5％？

请参见以下屏幕截图。在数据的最大值和最大可用图表区域之间有一些额外的空间。

我不是在谈论margin.top或margin.bottom，因为这也会使轴变小。

Answer 1

我认为最好直接操作缩放域，而不要仅依靠d3.extent()函数：https://jsfiddle.net/wmLd3r8z/。您可以使用时间序列数据在x轴上做一些更整洁的操作，但是希望这可以为您提供所需的信息。

const x_extent = d3.extent(data, d => d.ts);

const x = d3.scaleTime()
    .domain([x_extent[0] -1000, x_extent[1] + 1000])
    .range([0, w]);

const y_extent = d3.extent(data, d => d.value);
const y_extent_diff = 0.05 * Math.abs(y_extent[1] - y_extent[0]);

const y = d3.scaleLinear()
    .domain([y_extent[0] - y_extent_diff, y_extent[1] + y_extent_diff])
    .range([h, 0])