本文介绍了在d3条形图中设置自定义x轴标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

如果你看第二张图,你会看到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轴标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 12:46