在d3条形图中设置自定义x轴标签

Set custom x-axis labels in d3 bar charts?

本文关键字：标签 自定义 设置 d3 条形图      更新时间：2023-09-26

我在本页使用d3交叉过滤器库:

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

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

谁能告诉我如何完成这个?请注意，所有4个图调用相同的函数，并且我只需要为这个特定的图修改标签(硬编码就可以了)。

您应该查看顺序刻度。同时，您可以很容易地创建自己的tickFormat:

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 + ")");
相关文章：