d3时间序列刻度格式;显示格式化的标签，但在点击中保留基础日期

Question

我有一个时间表，需要在一天中的每个小时显示一些计数。 x数据就像[10/01/2000 00:00, 10/01/2000 01:00, ...]。为了保持我的x标记清晰易读，我想删除字符串的10/01/2000部分，，但是数据以完整日期形式出现，并且我还需要在单击栏时保留完整日期。有没有办法做到这一点？

Answer 1

你可以使用一个momentjs帮手处理你的日期/时间。

var formatDate = function(date, inputFormat, outputFormat) { 
 

 
    console.log(moment(date, inputFormat).format(outputFormat)); 
 
    return moment(date, inputFormat).format(outputFormat); 
 

 
}; 
 

 
formatDate('10/01/2000 01:00', 'dd/MM/YYYY hh:mm', 'hh:mm');

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

Answer 2

我觉得d3.time.format在这里很有用。小时分钟在下面使用。

var customTimeFormat = d3.time.format("%H:%M"); 

var x = d3.time.scale() 
     .domain([new Date(2000, 01, 10, 0), new Date(2000, 01, 10, 12)]) 
     .range([0, width]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .tickFormat(customTimeFormat); 

对于SVG标题显示完整的数据（假设你已经给“x轴”到您的轴的ID）

d3.select('#xaxis') 
    .selectAll('.tick') 
    .append("svg:title") 
     .text(function(d, i) { return d }); 

对于一个onclick下面将被使用，你可以实现clickMe你想要的。一个简单的警报，以更好看的东西，如http://bl.ocks.org/Caged/6476579

d3.select('#xaxis') 
    .selectAll('.tick') 
    .on('click',clickMe)