更改 dc.js 散点图 Y 轴标签上文本的数值

Question

我有一个散点图，它在我的 X 轴上绘制每个日期的唯一事件，并在 Y 轴上绘制它们在每一天的第二个发生时间。

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

这让我可以在图表上将每个点甚至唯一地表示为一个点，精确到秒。

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

唯一的问题是我的 Y 标签从 0 到 86400。我想将文本更改为熟悉的 HH AM/PM 格式，也许类似于“0 到 23”，即：如果（y 值 = 3600）return“凌晨 1 点”。

我的散点图是这样的：

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 对象很慢，但处理十几个报价可能无关紧要。

更改 dc.js 散点图 Y 轴标签上文本的数值

Changing number values for text on Y Axis label for dc.js ScatterPlot

charts

scatter-plot

axis-labels

d3.js

dc.js