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

Question

我正在创建一个带有D3的条形图。

如何删除＆＃39;，＆＃39; 1982年每个刻度线上都有tickFormat（）？

我的数据范围从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)

谢谢！

Answer 1

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

代码：

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

Answer 2

  

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

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

[1982, 2016]

域中的第一个值是1982，最后一个值是2016，它很简单。

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

例如，请检查此代码段，其中域为[1992, 2016]：

＆＃13;

＆＃13;

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);

＆＃13;

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

text{
  font-size:8px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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);

＆＃13;

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

text{
  font-size:8px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

2016年不再存在（即使1982年也不存在）。

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

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

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

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

检查代码段：

＆＃13;

＆＃13;

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);

＆＃13;

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

text{
  font-size:8px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

关于逗号，other answer让你了解。