Как удалить запятую в осях D3 и удалить последний тик?

Question

Я создаю гистограмму с D3.

Как удалить ',' в 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

поскольку домен 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"));