D3 条形图轴怪癖

我有这个代码：https : //plnkr.co/edit/t1GKaQOGnFxkTMK03Ynk

  var MIN = 60;
  var HR = MIN * 60;
  var tripDomain = [0, 15*MIN, 30*MIN, 45*MIN, 60*MIN, 90*MIN, Math.max(24*HR, d3.max(data))];

  var bins = d3.histogram()
    .thresholds(tripDomain)(data);

  var x = d3.scaleOrdinal()
    .domain(tripDomain)
    .range(tripDomain.map((_,i) => (i/(tripDomain.length-1))*width));

   // ...more code...

  chart.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

可以正确渲染直方图。唯一的问题是轴的第一个刻度是在彼此之上绘制 0 和 61。它应该只是 0... 不确定 61 来自哪里（它是数据的第一个值），但我不知道它是如何在轴上结束的。

请注意轴上的第一个值...您能解释一下这个问题吗？