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