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

你可以在我部署的app中的console.log中看到名为“arraytime”的数组： http://kidsvis.herokuapp.com/weather

祝福， Karolin

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将其剥离。

使用轴的字符串数组但缺少最后一个

1 个答案: