Блог

Главная - Вопросы по программированию - D3.JS — Форматировать значения тиков с помощью порядковой оси шкалы

D3.JS — Форматировать значения тиков с помощью порядковой оси шкалы

#arrays #d3.js #scale #ordinal

#массивы #d3.js #масштаб #порядковый

Вопрос:

Я использую порядковую шкалу в своей оси: 

 var xBarScale = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1)
    .domain(d3.range(data.length));

var xBarAxis = d3.svg.axis()
    .scale(xBarScale)
    .orient("bottom");

Мои метки тиков находятся в моем массиве данных. Каков наилучший способ форматирования моих значений тиков (с использованием метода D3), чем просто перечисление каждого из них в массиве, как я сделал здесь:

  xBarAxis.tickValues([data[0].q,data[1].q,data[2].q,data[3].q,data[4].q]);

Комментарии:

1. поскольку вы используете порядковую шкалу, вы можете поместить свои data[i].q значения в массив и использовать этот массив для шкалы: .domain(_yourarray_) — тогда вы сможете .tickValues полностью опустить свойство

2. xBarAxis.tickValues(data.map(function(d) { return d.q; }));

Ответ №1:

Я использую D3 v4 , и вот как я бы это сделал:

 var xBarScale = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1)
    .domain(d3.range(data.length));

var xBarAxis = d3.axisBottom( xBarScale )
    .tickFormat((d)=> d   ' position' ) // just an example of formatting each Tick's text
    .tickValues( data.map(d => d.q) )  // creates an Array of `q` values

Что касается моего примера, вы можете настроить tickFormat форматирование текстовых меток по своему усмотрению