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

Question

我正在用D3创建一个条形图。

如何从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

因为域名d3.scale是排他性的，我必须包括2017为了让轴线绘制到图表的最后。

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

[1982, 2016] 

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

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

例如，检查这个片段中，在所访问的[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 width="500" height="80"></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 width="500" height="80"></svg>

2016不存在了（甚至1982年不存在）。

解决方案：有一些不同的方式来力轴显示一些蜱，像规模使用nice()。但即使nice()也不保证每次都能正常工作。以保证在该域的第一个和最后一个值将在轴显示

一种方法是使用tickValues以及使与所述刻度域级联值的阵列，这样的：

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

问题采用这种方法是，根据ticks()中的滴答数量，结束滴答不是均匀分布的。

检查片段：

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 width="500" height="80"></svg>

关于逗号，该other answer已经得到了你覆盖。

Answer 2

我相信这类似的问题&答案可以帮助：D3 remove comma delimiters for thousands

为您的代码：

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