Question

我正在尝试使用d3js创建一些条形图。我使用相同的js作为模板并传递不同的数据来显示图表。如果它们的数据点少于10个，则x轴标签看起来很好。但如果它们超过10个数据点，则x轴标签重叠并聚集。所以我试图确定一种方法，我可以跳过每4个滴答.Below是代码。当大于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) })

             `

Answer 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: cirspEdges;
}

<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: cirspEdges;
}

<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: cirspEdges;
}

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

在D3js格式化x轴标签

1 个答案: