如何删除 D3 轴刻度中的逗号并删除最后一个刻度？

Posted 2023-04-14

【中文标题】如何删除 D3 轴刻度中的逗号并删除最后一个刻度？

【英文标题】：How to remove the comma in D3 axis ticks and remove the last tick?

【发布时间】：2017-02-15 22:39:44

【问题描述】：

我正在使用 D3 创建条形图。

如何使用 tickFormat() 从每个刻度线中删除 1982 年的 ','？

我的数据范围从 1982 年到 2016 年，但由于 d3.scale 的域是专有的，我必须包括 2017 年才能将轴绘制到图表的末尾。如何删除最后一个刻度？

var yearArray = d3.range(1982,2016)
var xScale = d3.scale.linear().domain([1982,2017]).range([0,width-100])
var xAxis = d3.svg.axis().orient('bottom').scale(xScale).ticks(34)

谢谢！

【参考方案1】：

我相信这个类似的问题和答案可能会有所帮助：D3 remove comma delimiters for thousands

对于您的代码：

var xAxis = d3.svg.axis().orient('bottom').scale(xScale).ticks(34).tickFormat(d3.format("d"));

【讨论】：

请注意，这个答案确实有效，但它具有删除小数精度的意外副作用。

【参考方案2】：

由于 d3.scale 的域是专有的，我必须包括 2017 才能将轴绘制到图表的末尾。

嗯，这是不正确的。如果您将域设置为：

[1982, 2016]

域中的第一个值是 1982，最后一个是 2016，就这么简单。

您在这里面临的问题是轴生成器。在 D3 中，刻度是动态生成的，有时很难得到你想要的刻度。

例如，检查这个sn-p，其中域是[1992, 2016]：

var svg = d3.select("svg");

var xScale = d3.scale.linear().domain([1992,2016]).range([10,490])
var xAxis = d3.svg.axis().orient('bottom').scale(xScale);
var gX = svg.append("g").attr("transform","translate(0,50)").call(xAxis);

path, line 
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;


text
  font-size:8px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg  ></svg>

如您所见，2016 年已经到来，没问题。但现在相同的代码，从 1982 年而不是 1992 年开始：

var svg = d3.select("svg");

var xScale = d3.scale.linear().domain([1982,2016]).range([10,490])
var xAxis = d3.svg.axis().orient('bottom').scale(xScale);
var gX = svg.append("g").attr("transform","translate(0,50)").call(xAxis);

path, line 
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;


text
  font-size:8px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg  ></svg>

2016 已经不存在了（甚至 1982 都不存在了）。

解决方案：有一些不同的方法可以强制轴显示一些刻度，例如在刻度中使用nice()。但即使nice() 也不能保证每次都能正常工作。

保证域中的第一个和最后一个值将显示在轴中的一种方法是使用tickValues 并传递与比例域连接的值数组，如下所示：

tickValues(xScale.ticks(20).concat(xScale.domain()))

这种方法的问题在于，根据ticks() 中的刻度数，结束刻度的间距不均匀。

检查sn-p：

var svg = d3.select("svg");

var xScale = d3.scale.linear().domain([1982,2016]).range([10,490])
var xAxis = d3.svg.axis().orient('bottom').scale(xScale).tickValues(xScale.ticks(20).concat(xScale.domain()));
var gX = svg.append("g").attr("transform","translate(0,50)").call(xAxis);

path, line 
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;


text
  font-size:8px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg  ></svg>

关于逗号，other answer 已经涵盖了您。