Линейный график d3 - как начать линию справа от оси Y? - PullRequest
Новая
       18

Линейный график d3 - как начать линию справа от оси Y?

0 голосов
/ 25 марта 2019

У меня есть линейный график с датами, представляющими ось X. Вместо того, чтобы моя линия начиналась на оси Y, я бы хотел немного переместить ее вправо, чтобы она была немного более читаемой. Если возможно, я бы также хотел добавить дату в свой список тиков по оси X. Так что, в принципе, если у меня есть массив из 5 дат, таких как:

{«19 марта 2018 года», «24 апреля 2018 года», «19 мая 2018 года», «4 июня 2018 года», «6 июля 2018 года»}

Я бы хотел, чтобы 19 марта 2018 года НЕ отображалось непосредственно по оси X = 0. Однако я все же хотел бы иметь значение галочки на оси X = 0, например, первую дату в моем массиве. минус один месяц. Имеет ли это смысл? Это легко сделать с помощью d3? 

const circleLabelDrawDuration = 700;
const minDate = data[0].pullDate.setMonth(data[0].pullDate.getMonth() - 4);
const maxDate = data[data.length - 1].pullDate;

const xAxis = d3.scaleTime().domain([minDate, maxDate]).range([0, width]);

svg.append('g').call(d3.axisBottom(xAxis).ticks(pullDates.length).tickValues(pullDates).tickFormat(d3.timeFormat("%b %Y")))
.attr('transform', `translate(0,${height})`).selectAll('text')
.style('text-anchor', 'end').attr('dx', '-.8em').attr('dy', '-.15em').attr('transform', 'rotate(-50)');

1 Ответ

0 голосов
/ 25 марта 2019

Я бы сделал что-то вроде следующего при настройке вашего x-домена. Я считаю, что смещения весьма полезны. Использование некоторых функций d3 для упрощения. 

const monthInMs = 2.628e+9 // this is 1 month in ms
const xMin = +d3.min(dataArray, (d) => d.timestamp) - monthInMs;
const xMax = +d3.max(dataArray, (d) => d.timestamp) + monthInMs;
xScale.domain([xMin, xMax]);

Я добавил + перед d3.min, чтобы гарантировать, что возвращаемое значение является числом, а не объектом даты. Я дал и мин, и максимум, чтобы вы могли иметь отступы с обеих сторон, но вам действительно нужно использовать только те, которые вам нравятся.

...