javascript - D3 中的控制轴刻度数

Question

我正在尝试使用此代码创建一百多个图表，每个图表都是一个独特的图表并绘制不同的点。但是，我需要它们的总体布局看起来相同。

当使用 .ticks() 函数时，D3 似乎完全忽略我输入的任何值。我的每一张图表总是带有不同数量的刻度，但我找不到解决它的方法。有没有办法强制D3接受我的值？

这是相关代码:

var xAxis = d3.svg.axis()  
  .orient("bottom")
  .scale(x)
  .ticks(10)
  .tickFormat(d3.format("d"))
  .tickSize(1);

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(10)
  .tickSize(1);

var yAxixObject = graph.append("g")
  .call(yAxis)
  .attr("transform", "translate("+ margin.left + "," + margin.top + ")");

var xAxisObject = graph.append("g")
  .call(xAxis)
  .attr("transform", "translate("+ margin.left + "," + (height + margin.top) + ")");

Answer 1

根据 FernOfTheAndes 的建议，我最终使用了 .tickValues() 函数。我刚刚添加了一个循环来创建一个数组以输入到 .tickValues() 中。现在，无论所有数据有多么不同，我的图表仍然都有 10 个刻度。

这是我的 y 轴的所有相关代码，它们分散在我的项目中:

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickSize(1);

...

var ticksNum = 10;
var yAxisTicks = [];
var yDomain = [d3.min(data, function(d){return d.Level;}), d3.max(data, function(d){return d.Level;})];
y.domain(yDomain);

...

for (var i = 0; i < ticks; i++ ){
          yAxisTicks.push((yDomain[1] - yDomain[0]) / (ticks - 1)* i + yDomain[0]);
    }

yAxis.tickValues(yAxisTicks);

...

var yAxixObject = graph.append("g")
  .call(yAxis)
  .attr("transform", "translate("+ margin.left + "," + margin.top + ")");