D3 图表 - 如何将 X 轴置于 Y 轴下方？

Question

我希望我的 X 轴位于图表的底部，但是为什么数据设置为零时，它会到达 Y 轴的中心？如何防止它进入中心？？

let x = d3.scaleBand().rangeRound([0, width]).padding(1),
  y = d3.scaleLinear().range([height, 0])

x.domain(data.map(function (d) { return d.timescale; }));
y.domain([0, d3.max(trends, function (c) {
  return d3.max(c.values, function (v) {
    return v.total;
  });
})]);

Answer 1

问题发生是因为y.domain 的最大范围未定义。作为后备，垂直轴居中。

要解决这个问题，请确保设置了一个值，下面的示例使 y 比例至少在域 0 和 1 之间移动。

修复此问题后，x 轴应正确定位在图表区域的底部。

let maxExtent = Math.max(1, d3.max(trends, function (c) {
  return d3.max(c.values, function (v) {
    return v.total;
  });
}))

y.domain([0, maxExtent]);