Question

在我的d3折线图中，我只想要绘制数据的刻度。这证明是时间戳的问题但是我得到了：

tickValues。

我想将字符串转换为// Hard coded data scope.data = [ {date: '12:00', glucoseLevel: 400}, {date: '15:00', glucoseLevel: 200}, {date: '18:00', glucoseLevel: 300}, {date: '23:00', glucoseLevel: 400} ]; var parseDate = d3.timeParse('%I:%M'); scope.data.forEach(function(d) { d.date = parseDate(d.date); d.glucoseLevel = +d.glucoseLevel; }); var x = d3.scaleTime() .range([0, width]); var xAxis = d3.axisBottom(x) .tickValues(['12:00', '15:00', '18:00', '23:00']); // Add the X Axis svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(xAxis);数组中的数字，但我不能，因为它有一个冒号。有什么想法吗？

langversion:6

Answer 1

您将X值指定为次，因此您还必须将X轴刻度值指定为次。

由于你已经有正确格式的X值，你可以写

var xAxis = d3.axisBottom(x)
              .tickValues(scope.data.map(function (d) { return d.date; }));

.tickValues()不是设置刻度标签，而是设置刻度线出现在轴上的位置。如果您希望以某种方式格式化刻度标签，请使用tickFormat指定格式化程序，例如：

var xAxis = d3.axisBottom(x)
              .tickValues(scope.data.map(function (d) { return d.date; }))
              .tickFormat(d3.timeFormat("%H:%M"));

我使用格式字符串%H:%M代替%I:%M作为%I is hours in the range 01-12，而%H使用24小时制。为了保持一致性，我建议将时间解析功能更改为d3.timeParse('%H:%M')，尽管使用%I解析时间大于12的时间似乎有效。

最后，您还需要设置比例对象domain的{{1}}，例如：

传递给var x = d3.scaleTime() .domain([parseDate('12:00'), parseDate('23:00')]) .range([0, width]);的两个值是用于轴的最小和最大X值。我已经使用了数据的最小值和最大值，但我可以选择不同的时间范围（例如domain到00:00），只要它包含所有数据点。< / p>

D3图表 - 使用tickValues进行时间提供＆＃34;翻译（NaN，0）＆＃34;

1 个答案: