如何在D3

Question

正如您在示例中所看到的，随着域的增长，序数轴（比例）上的刻度标签变得拥挤且难以辨认。如何使它们像在线性轴上一样自动调整？

（我想我可以使用线性比例，但是this question并且Mike Bostock自己的回答表明序数比例更适合这种类型的数据。毕竟，域是离散的，我正在制作修改后的条形图，方便的填充设置很有用。）

var x0 = d3.scaleBand()
  .domain(d3.range(1,6))
  .range([0,200]);

var x = d3.scaleBand()
  .domain(d3.range(1,51))
  .range([0,200]);

var xLinear = d3.scaleLinear()
  .domain([1,50])
  .range([0,200]);

d3.select('svg').append('g')
  .attr('transform', 'translate(10,10)')
  .call(d3.axisBottom(x0));

d3.select('svg').append('g')
  .attr('transform', 'translate(10,50)')
  .call(d3.axisBottom(x));

d3.select('svg').append('g')
  .attr('transform', 'translate(10,100)')
  .call(d3.axisBottom(xLinear));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width='300' height='150'></svg>

Answer 1

此解决方案利用了非常智能的内置函数d3.ticks()，它处理边缘情况，因此我们不必这样做。

＆＃13;

＆＃13;

var dataSmall = d3.range(1,8),
    dataLarge = d3.range(1, 51);

var xS = d3.scaleBand()
  .domain(dataSmall)
  .rangeRound([0,200]);

var xL = d3.scaleBand()
  .domain(dataLarge)
  .rangeRound([0,200]);

function makeAxis(scale) {
  var n=5, 
      data = scale.domain(),
      dataLength = data.length;
  
  return d3.axisBottom(scale).tickValues( 
    dataLength > n ? d3.ticks(data[0], data[dataLength-1], n) : data);
}

d3.select('svg').append('g')
  .attr('transform', 'translate(10,10)')
  .call(makeAxis(xS));

d3.select('svg').append('g')
  .attr('transform', 'translate(10,50)')
  .call(makeAxis(xL));

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width='300' height='150'></svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要手动过滤滴答，如下所示：http://bl.ocks.org/mbostock/3212294（这是D3 v3，请参阅下面的v4版本）

var x0 = d3.scaleBand()
  .domain(d3.range(1,6))
  .range([0,200]);

var x = d3.scaleBand()
  .domain(d3.range(1,51))
  .range([0,200]);

var tickValues = x
   .domain()
   .filter(function(d, i) { return !((i + 1) % Math.floor(x.domain().length / 10)); });
           
var xLinear = d3.scaleLinear()
  .domain([1,50])
  .range([0,200]);

d3.select('svg').append('g')
  .attr('transform', 'translate(10,10)')
  .call(d3.axisBottom(x0));

d3.select('svg').append('g')
  .attr('transform', 'translate(10,50)')
  .call(d3.axisBottom(x).tickValues(tickValues));

d3.select('svg').append('g')
  .attr('transform', 'translate(10,100)')
  .call(d3.axisBottom(xLinear));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width='300' height='150'></svg>