Javascript 在d3条形图中设置自定义x轴标签?
我在本页上使用d3交叉过滤器库: 如果查看第二个图形,您将看到x轴的标签为0.0、0.5、1.0,6.0. 我需要这些标签是一周中的几天,所以0.0应该是星期一,0.5应该根本不存在,我不知道为什么会出现,因为数据中只有整数,1.0应该是星期二等等Javascript 在d3条形图中设置自定义x轴标签?,javascript,d3.js,Javascript,D3.js,我在本页上使用d3交叉过滤器库: 如果查看第二个图形,您将看到x轴的标签为0.0、0.5、1.0,6.0. 我需要这些标签是一周中的几天,所以0.0应该是星期一,0.5应该根本不存在,我不知道为什么会出现,因为数据中只有整数,1.0应该是星期二等等 有人能告诉我如何做到这一点吗?请注意,所有4个图都调用相同的函数,我只需要为这个特定的图修改标签(硬编码很好)。您应该查看顺序比例。同时,您可以非常轻松地制作自己的格式: var weekdays = ["Mon","Tues","Wed","Th
有人能告诉我如何做到这一点吗?请注意,所有4个图都调用相同的函数,我只需要为这个特定的图修改标签(硬编码很好)。您应该查看顺序比例。同时,您可以非常轻松地制作自己的格式:
var weekdays = ["Mon","Tues","Wed","Thurs","Fri","Sat","Sun"];
var formatDay = function(d) {
return weekdays[d % 7] + "day";
}
然后将其传递到秤上,例如:
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(formatDay);
在D3 v4中,我通过以下方式进行了计算:
var data = ["Mon","Tues","Wed","Thurs","Fri","Sat","Sun"]
var xScaleLabels = d3
.scalePoint()
.domain(data)
.rangeRound([50, width - 50]); // In pixels
var axisTop2 = d3
.axisBottom()
.scale(xScaleLabels)
.ticks(data.length);
svg
.append("g")
.call(axisTop2)
.attr("transform", "translate(" + margin.left + "," + height + ")");