Question

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

当使用.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 + ")");

D3中的控制轴刻度号

1 个答案: