Как заменить метки дат на оси?

Question

[zlodiak]

Использую d3 версии 5.7.0, пытаюсь вывести на экран оси координат. По оси Y должны быть отложены цифры, по оси X должны быть отложены даты вида "21 мая", "21 июня" и т. д.

JSFIDDLE

С осью Y проблем нет, с осью X проблемы есть. Дело в том, что вместо человекопонятной метки даты сейчас выводится дата в unix-формате. Помогите пожалуйста это исправить.

const data = [
  { dateUnix: 1526860800, dateHuman: '21 мая',      price: 30000 },
  { dateUnix: 1529539200, dateHuman: '21 июня',     price: 20000 },
  { dateUnix: 1532131200, dateHuman: '21 июля',     price: 40000 },
  { dateUnix: 1534809600, dateHuman: '21 августа',  price: 30000 }
];

let w = 1200;
let h = 250;
let yPeriod = 10000;
let padding = 20;
let tickSize = 5;
let tickPadding = 10;
let paddingYaxis = 50;
let gridColor = '#BDC3C7';

let xScale;
let yScale;
let xAxis;
let yAxis;
let svg = d3.select('#graph');;



xScale = d3.scaleLinear()
  .domain([
  d3.min(data, d => +d['dateUnix']),
  d3.max(data, d => +d['dateUnix']) 
])
  .range([paddingYaxis, w - padding]);

yScale = d3.scaleLinear()
  .domain([
  0,
  d3.max(data, d => +d['price'] + yPeriod)        
])
  .range([h - padding, tickSize]);

xAxis = d3.axisBottom(xScale)
  .tickSizeInner(0)
  .tickSizeOuter(tickSize)
  .tickPadding(tickPadding);

yAxis = d3.axisLeft(yScale)
  .tickSizeInner(-(w - paddingYaxis - tickSize * 2))
  .tickSizeOuter(0)
  .tickPadding(tickPadding)
  .tickFormat(d3.format(' '));

svg.append('g')
  .attr('class', 'x-axis-group')
  .attr('transform', 'translate(0,' + (h - padding) + ')')
  .call(xAxis);

svg.append('g')
  .attr('class', 'y-axis-group')
  .attr('transform', 'translate(' + paddingYaxis + ', 0)')
  .call(yAxis);

d3.select(".y-axis-group .domain").remove();

Answer 1

[0xD34F]

Укажите tickFormat для xAxis:

.tickFormat(d3.timeFormat('%d %B'))

UPD. Дату надо указывать в миллисекундах, домножьте свои значения на 1000.

Comments

[zlodiak]

Спасибо, но это не совсем то. В вашем решении используется не человекопонятная дата, полученная из unixTimeStamp. Но мне человекопонятная дата приходит с сервера. Вот её бы мне хотелось использовать.

проблема в том, что если пользоваться вашим решением, то придётся ещё и локаль менять, а это для меня задача непосильная :)

[0xD34F]

zlodiak, посильная.