javascript - 使用字符串数组作为轴，但缺少最后一个

Question

我还有一个问题要问你们。我构建了一个天气应用程序，并尝试在 x 轴上显示预测的时间，该时间工作正常，但奇怪的是数组的最后一个值丢失了。

轴的代码如下所示:

var axisscale = d3.scale.ordinal()
    .domain(arraytime)
    .rangeRoundBands([0, width]);

console.log(arraytime);


var xscale = d3.scale.linear()
    .domain([0, 100])
    .range([0, width]);

var xAxis = d3.svg.axis()
    .scale(axisscale)
    .tickValues(arraytime)
    .tickSize(6, 0)
    .orient("top");

您可以在我部署的应用程序的 console.log 中看到名为“arraytime”的数组: http://kidsvis.herokuapp.com/weather

最美好的祝愿，卡罗琳

Answer 1

问题是数组的最后一个元素与第一个元素完全相同:

Array[9]
  0: "2:00:00" // <-- 
  1: "5:00:00"
  2: "8:00:00"
  3: "1:00:00"
  4: "0:00:00"
  5: "3:00:00"
  6: "6:00:00"
  7: "9:00:00"
  8: "2:00:00" // <--

序数比例尺无法区分第一个和最后一个 “2:00:00”，并返回与第一个 “2:00:00”对应的值.

考虑将日期添加到域中以确保它们是唯一的。如果您不希望它们位于轴中，则可以使用 tickFormat function将其删除。