在d3条形图中设置自定义x轴标签？ [英] Set custom x-axis labels in d3 bar charts?

问题描述

我正在使用此页面上的d3 crossfilter库：

I'm using the d3 crossfilter library on this page:

http://jovansfreelance.com/bikestats/d3/crossfilter.php

如果你看第二张图，你会看到x -axis的标签为0.0,0.5,1.0，...，6.0。我需要这些标签是星期几，所以0.0是星期一，0.5不应该在那里我不知道为什么它出现，因为数据中只有整数，1.0应该是星期二等。

If you look at the second graph, you'll see the x-axis has labels 0.0, 0.5, 1.0, ... , 6.0. I need those labels to be days of the week, so 0.0 would be Monday, 0.5 shouldn't be there at all and I don't know why it appeared since there are only whole numbers in the data, 1.0 should be Tuesday etc.

谁能告诉我如何做到这一点？请注意，所有4个图形调用相同的函数，我需要修改标签（硬编码它们很好）仅适用于此特定图形。

Can anyone tell me how to accomplish this? Note that all 4 graphs call the same function, and I need to modify the labels (hard-coding them is fine) only for this particular graph.

推荐答案

你应该查看序数量表。在此期间，您可以轻松制作自己的tickFormat：

You should check out ordinal scales. In the meantime, you can make your own tickFormat quite easily:

var weekdays = ["Mon","Tues","Wed","Thurs","Fri","Sat","Sun"];
var formatDay = function(d) {
    return weekdays[d % 7] + "day";      
}

然后将其传递给比例，例如：

Then just pass it to the scale, e.g.:

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(formatDay);

这篇关于在d3条形图中设置自定义x轴标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！