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

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

D3 chart - How can I put the X-axis below the Y-axis?

javascript

d3.js

multiline

yaxis