повторяющиеся значения по оси y с помощью тикформата d3

#javascript #d3.js #charts

Вопрос:

Я получаю повторяющиеся значения оси y с помощью tickFormat d3.формат(‘.1s’), похоже, что фактическое число отличается, например, это будет массив [6045678, 6223456, 6076887], но когда вы отформатируете числа, вы получите 6 миллионов 3 раза,

каково лучшее решение этой проблемы, есть ли какие-либо функции d3 для этой проблемы или нам нужно создать массив значений.

 let yAxisValues = [6045678, 6223456, 6076887];
const yScale = d3.scaleLinear()
       .domain([d3.min(yAxisValues), d3.max(yAxisValues)])
       .range([height, 0])
       .nice();

let yAxis = d3.axisLeft(yScale)
       .tickPadding(7)
       .ticks(5)
       .tickFormat(d3.format(".1s"))
 

Ответ №1:

Попробуйте изменить precision число с 1 на 2/3/4 и так далее, d3.format(".1s") чтобы получить то, что подходит именно вам.

 let yAxisValues = [6045678, 6223456, 6076887];
let formatter = d3.format(".1s");
let formatter2 = d3.format(".2s");
let formatter3 = d3.format(".3s");
let formatter4 = d3.format(".4s");

yAxisValues.forEach((d) => console.log(formatter(d)));
yAxisValues.forEach((d) => console.log(formatter2(d)));
yAxisValues.forEach((d) => console.log(formatter3(d)));
yAxisValues.forEach((d) => console.log(formatter4(d)));
 

Приведенный выше код выводится, как показано ниже. 6М 3 раза-это то, что вы получаете, остальное-после изменения precision .

введите описание изображения здесь