На линейном графике d3 невозможно увидеть название месяца, если дата - последний день месяца - PullRequest
Новая
       7

На линейном графике d3 невозможно увидеть название месяца, если дата - последний день месяца

0 голосов
/ 07 ноября 2018

Я использую график реагирования, график d3, чтобы сгенерировать линейный график. Я использовал d3.min и d3.max, чтобы сгенерировать минимальное и максимальное значения для осей x и y. Данные для xAxis всеми способами поступают в строковом формате, скажем, «2017-12-31», и я использую timeparse для разбора строки в формат даты и передачи ее по оси x.

Теперь шкала xAxis отображается как январь, февраль, март .... 

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3Axis.axisBottom(x).tickFormat(d3Time.timeFormat("%b")))

Теперь, когда минимальное значение xAxis является последней датой месяца, оно не отображается в масштабе xAxis.

Например, если минимальное значение равно «2018-07-01», то на шкале оси будет отображаться «июль, август, сентябрь, октябрь»

, но если минимальное значение равно «2018-07-31», то на шкале оси будет отображаться «Aug, Sep, Oct»

Данные отформатированы таким образом, что даты всех предыдущих месяцев будут отображаться как последние месяца. 

ex: [{date: '2018-07-31', value: 10}, 
     {date: '2018-08-31', value: 10},
     {date: '2018-09-30', value: 10},
     {date: '2018-10-31', value: 10}]

Можно ли отобразить название месяца, даже если минимальное значение является последним в месяце.

1 Ответ

0 голосов
/ 07 ноября 2018

d3.scaleTime (). Nice - это то, что вы будете искать в этом случае.

Цитирование документов:

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

Пример без использования nice метода 

var data = [{date: '2018-07-31', value: 10}, 
     {date: '2018-08-31', value: 10},
     {date: '2018-09-30', value: 10},
     {date: '2018-10-31', value: 10}];

var parseTime = d3.timeParse('%Y-%m-%d');

data.forEach(function (d) {
	d.date = parseTime(d.date);	
});
var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 400);

var gAxis = svg.append('g').classed('x axis', true);

var xScale = d3.scaleTime().domain(d3.extent(data, d => d.date)).range([10, 490]);

var xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%b"));

gAxis.call(xAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>

Пример использования метода шкалы nice 

var data = [{date: '2018-07-31', value: 10}, 
     {date: '2018-08-31', value: 10},
     {date: '2018-09-30', value: 10},
     {date: '2018-10-31', value: 10}];

var parseTime = d3.timeParse('%Y-%m-%d');

data.forEach(function (d) {
	d.date = parseTime(d.date);	
});
var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 400);

var gAxis = svg.append('g').classed('x axis', true);

var xScale = d3.scaleTime().domain(d3.extent(data, d => d.date)).range([10, 490]).nice();

var xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%b"));

gAxis.call(xAxis);
<script src="https://d3js.org/d3.v4.min.js"></script>

Надеюсь, это поможет.

...