D3 v5 xAxis刻度标签使用日期值

时间:2019-03-03 03:53:56

标签: date d3.js scale axis axis-labels

我正在更详细地询问这个问题。在尝试锻炼如何应用日期以标记X轴刻度线时遇到麻烦。我尝试了各种示例的不同解决方案。数据是格式为Hour Minute am / pm的对象,例如。 12点30分表示为d.TIME。我正在使用此示例https://bl.ocks.org/d3indepth/8948c9936c71e63ef2647bc4cc2ebf78

数据正在输出,但是我认为在某处需要scaleLinear。 任何建议或类似的链接将不胜感激。

<svg width="800" height="80">
    <g id="wrapper" transform="translate(40, 40)">
    </g>
</svg>

var timeScale = d3.scaleTime()
    .domain([new Date(d3.max(dataset, function(d) { return (d.TIME)})), new Date(d3.min(dataset, function(d) { return (d.TIME)}))])
    .range([0, 700]);

d3.select('#wrapper')
.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('r', 2)
.attr('cy', 8)
.attr('cx', function(d) {
    return timeScale(d.TIME);
});

d3.select('#wrapper')
.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('x', function(d) {
    return timeScale(d.TIME);
})
.text(function(d) {
    return d.TIME;
});

0 个答案:

没有答案