更改dc.js ScatterPlot的Y轴标签上文本的数字值

Question

我有一个散点图，用于绘制X轴上每个日期的唯一事件，以及每天发生在Y轴上的第二个事件。

为了实现这一点，我将我用于X轴的日期数据，并通过一个函数运行它，该函数将输出事件发生的当天的第二天（0到86400）。从这个意义上讲，我的Y轴从0秒到86400秒。

这使我能够将每个人甚至唯一地表示为我的图表上的一个点，直到第二个。

我对图表的结果非常满意：

唯一的问题是我的Y标签从0到86400.我想将文本更改为熟悉的HH AM / PM格式，可能是“0到23”，其中ie：if（y value） = 3600）返回“1 AM”。

我的散点图看起来像这样：

scatterPlot
        .width(window.innerWidth-100)
        .height(window.innerHeight/2)
        .x(d3.time.scale().domain([minDate, maxDate]))
        .brushOn(false)
        .mouseZoomable(true)
        // .title(function (d) {
        //     return "Event: " + d['text'];
        // })
        .clipPadding(5)
        .yAxisLabel("Hour of the day")
        .elasticY(true)
        .dimension(eventsByDateAndHourDim)
        .group(eventsByDateAndHourGroup);

我试着这样做：

scatterPlot.yAxis().tickFormat(function (d) {
    if (domain = 43200)
        return "12 PM";
})

但这只会将所有标签更改为“12 PM”。我不确定如何引用我的Y域的实际值。

我尝试使用“if（eventsByDateAndHourGroup = 43200）...”组，但这也不起作用。

Answer 1

传递给tickFormat() method的函数的参数是需要格式化的Y坐标。

所以你应该可以做一些像

这样的事情

scatterPlot.yAxis().tickFormat(function (d) {
    var hour = Math.floor(d/3600),
        pm = hour > 11;
    if(pm) hour -= 12; 
    if(hour === 0) hour = 12; 
    return String(hour) + (pm ? ' PM' : ' AM');
});

或者您可以使用d3.time.format.utc获得更强大，更优雅的解决方案：

var hourFormat = d3.time.format.utc('%I %p');
scatterPlot.yAxis().tickFormat(function (d) {
    var date = new Date(d*1000);
    return hourFormat(date);
});

效率稍差，因为Date对象速度很慢，但处理十几个滴答可能并不重要。