D3 条形图轴怪癖

Question

我有这个代码：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 来自哪里（它是数据的第一个值），但我不知道它是如何在轴上结束的。

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

Answer 1

...不确定 61 来自哪里。

它来自标尺的域，当您附加矩形和文本时，您正在更改它！这是预期的行为，因为您使用的是序数比例。

说明：

您的 x 比例域定义明确：

[0, 900, 1800, 2700, 3600, 5400, 1280703]

但是，在你的第一个 bin 中，你有这个（作为数组属性）：

[x0: 61, x1: 900]

因此，每当您使用带有 x 比例的第一个 bin 的 x0 时，例如：

.attr("transform", function(d){
    return "translate(" + x(d.x0) + "," + y(d.length) + ")"; 
});

...您实际上是在 引入域中的新值（有关详细说明，请参阅我的 answer here），因为 x 比例域中没有 61。

顺便说一句，这个新值是在域的末尾引入的，尽管与0 非常接近，但61 实际上是最后一个刻度。

解决方案：

声明unknown：

var x = d3.scaleOrdinal()
    .unknown(0)

这是您更新的插件：https://plnkr.co/edit/n1IoEkHcL0sGUraDVCfc?p=preview