Блог

Главная - Вопросы по программированию - Настройка формата отсчета месяца или года d3

Настройка формата отсчета месяца или года d3

#d3.js

#d3.js

Вопрос:

Итак, я создал диаграмму в формате d3 и использовал формат оси x по умолчанию,

 d3.axisBottom(x)

который выводит следующий график:

месяцы и годы

Как я могу вручную создать и настроить этот формат? В частности, я хотел бы использовать короткие названия месяцев, такие как «Октябрь», чтобы «Октябрь» не закрывал метку следующего года.

Ответ №1:

Используйте tickFormat для форматирования тиков по вашей оси x. В вашем случае .tickFormat(d3.timeFormat("%b")) вернет короткие названия месяцев (но из-за этого год исчезнет).

Вот демонстрационный:

 var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 100)   
            
var xScale = d3.scaleTime()
  .domain([new Date("2014-01-01"), new Date("2016-01-01")])
  .range([0, 450]);
        
var xAxis = d3.axisBottom(xScale)
  .tickFormat(d3.timeFormat("%b"));
  
svg.append("g")
  .call(xAxis);  
 <script src="https://d3js.org/d3.v4.min.js"></script>

Чтобы сохранить функциональность месяца / года по умолчанию, вам необходимо создать свой собственный пользовательский формат. 

 var xAxis = d3.axisBottom(xScale)
   .tickFormat(function(date){
       if (d3.timeYear(date) < date) {
         return d3.timeFormat('%b')(date);
       } else {
         return d3.timeFormat('%Y')(date);
       }
    });

Проверьте демо: 

 var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 100)   
            
var xScale = d3.scaleTime()
  .domain([new Date("2014-01-01"), new Date("2016-01-01")])
  .range([0, 500]);

var xAxis = d3.axisBottom(xScale)
  .tickFormat(function(date){
    if (d3.timeYear(date) < date) {
      return d3.timeFormat('%b')(date);
    } else {
      return d3.timeFormat('%Y')(date);
    }
  });
  
svg.append("g")
  .attr("class", "x axis")
  .call(xAxis);
	
d3.selectAll(".ticks");  
 <script src="https://d3js.org/d3.v4.min.js"></script>

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

1. Есть ли способ сохранить исходную функциональность тиков оси, также показывающих год?

2. @ksav На самом деле я разобрался с этим самостоятельно. Также отредактируйте ответ.

3. @Juan Это очень непредсказуемо. Это зависит, среди прочего, от домена. Очень сложно сказать, и именно поэтому временную ось так сложно настроить.

4. да, я спросил в основном потому, что иногда мне приходится писать пользовательские функции для отображения месяцев или лет в зависимости от условий «d», и иногда по умолчанию это делается самостоятельно … иногда он отображает один и тот же тик несколько раз… Я чувствую, что это все еще одна из тех частей d3, с которыми я пока не чувствую себя комфортно. Спасибо, Херардо, ты уже много раз помогал мне за эти годы

5. Для расширенной версии, также форматирующей недели, дни, часы, этот пример может помочь: bl.ocks.org/wboykinm/34627426d84f3242e0e6ecb2339e9065