在 D3js 中格式化 x 轴的标签答案

【问题标题】：Formatting labels for x-axis in D3js在 D3js 中格式化 x 轴的标签
【发布时间】：2018-03-28 12:41:08
【问题描述】：

我正在尝试使用 d3js 创建一些条形图。我使用相同的 js 作为模板并传递不同的数据来显示图表。如果它们少于 10 个数据点，则 x 轴标签看起来不错。但如果它们的数据点超过 10 个，则 x 轴标签会重叠和聚集。所以我试图找出一种方法，我可以每 4 个滴答声跳过一次。下面是代码。当超过 9 个数据点时，它根本不显示任何刻度。

` var ticks = d3.selectAll(".tick text");

               function tickLabels(dataLength, d) {
                   if (dataLength < 9) return "";
                   return  ticks.attr("class", function(d,i){
                       if(i%3 != 0) d3.select(this).remove();
                   })
                 }

              var xAxis = d3.axisBottom().scale(x)
                                .ticks()
                                .tickFormat(function(d,i) {  return tickLabels(all.length, d) })

             `

【问题讨论】：

标签： d3.js label bar-chart

【解决方案1】：

有两种方法可以做你想做的事。第一个是使用tickFormat。

所以，假设你有这个拥挤的轴：

var svg = d3.select("svg");
var data = d3.range(30).map(function(d) {
  return "tick" + d
});
var scale = d3.scalePoint()
  .domain(data)
  .range([20, 480]);
var axis = d3.axisBottom(scale);
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);

path, line {
  shape-rendering: crispEdges;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>

您可以使用tickFormat 仅显示每 4 个刻度中的一个：

var svg = d3.select("svg");
var data = d3.range(30).map(function(d) {
  return "tick" + d
});
var scale = d3.scalePoint()
  .domain(data)
  .range([20, 480]);
var axis = d3.axisBottom(scale)
  .tickFormat(function(d, i) {
    return i % 3 === 0 ? d : null;
  });
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);

path, line {
  shape-rendering: crispEdges;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>

但是，此解决方案仅删除文本，留下勾号。如果您也想删除勾选，您可以创建一个新选择并使用each：

var svg = d3.select("svg");
var data = d3.range(30).map(function(d) {
  return "tick" + d
});
var scale = d3.scalePoint()
  .domain(data)
  .range([20, 480]);
var axis = d3.axisBottom(scale);
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);
d3.selectAll(".tick").each(function(d, i) {
  if (i % 3 != 0) {
    d3.select(this).remove()
  }
})

path,
line {
  shape-rendering: crispEdges;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>

【讨论】：