javascript d3 刻度格式

Question

我正在使用 d3.v4 并阅读了本教程来修改刻度数和刻度格式 https://bl.ocks.org/mbostock/9764126

但是这有效

 svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x).ticks(11, '.0s') )

但是当我这样做时

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x).ticks(11).tickFormat(d3.format('.0s')) )

刻度格式似乎覆盖了刻度数，因为格式正确，但刻度数太多。我可以使用

让蜱虫本身工作

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x).ticks(11) )

刻度格式方法对 d3v4 有效，那么我在这里做错了什么？

Answer 1

@echo - 我将使用 .tickValues() 和 d3.range() 来代替 .ticks()。与 .ticks() 相比，.tickValues() 提供了更多控制。

这是您修改后的代码:

 <script>
  const svg = d3.select("body").append("svg").attr("width",600).attr("height",500);
  const g = svg.append("g").attr("transform", "translate(0,500)");
  const xScale = d3.scaleLinear().domain([100000,1000000]).range([0,500]);
  const xAxis = d3.axisBottom(xScale).tickFormat(d3.format('.0s')).tickValues(d3.range(100000,1000000,400000));
  g.call(xAxis).attr("transform","translate(10,200)");
</script>

jsfiddle:https://jsfiddle.net/435j26sf/14/

另外，请检查 .tickValues() Change the ticks on x-axis 上的这个问题.

希望这有帮助。