Удалить все другие метки столбца на D3 гистограмме

Question

Я пытаюсь воссоздать следующее D3

И я получил следующие до сих пор: http://codepen.io/jpezninjo/pen/dNwmVK

Я смотрел его и я мог найти лучший ответ: Show every other tick label on d3 time axis?, но я не использую класс для создания каждой метки столбца. Я думаю, что следующие две строки - это те, которые управляют моими ярлыками, но я не уверен, как это сделать.

var x = d3.scaleBand() 
.range([0, width]) 
.padding(0.1); 

x.domain(data.map(function(d) { return d.key; })); 

Я также пытаюсь выяснить, как я могу поставить некоторые отступы слева и справа от баров

Answer 1

По крайней мере, два возможных пути:

1. Сделайте вашу ось X временной оси и использовать d3.timeDay.every(2), чтобы указать каждый второй день. Этот подход показан здесь: http://codepen.io/anon/pen/YNdaRB.

   Ключевая часть: var axisBottom = d3.axisBottom(x).ticks(d3.timeDay).tickArguments([d3.timeDay.every(2)]);.

   Чтобы сделать эту работу, я также должен был (а) сделать d.key равный результат от parseDate вместо отформатированной строки даты, (б) жестко закодировать ширину для баров вместо использования x.bandwidth(), и (с) перевести ось x на width/2 px, чтобы центрировать ее под решеткой (строка 94). Могут быть лучшие способы сделать (b) и (c), но я в основном хотел показать способность d3.timeDay.every(2) (docs).

2. Используйте свой текущий подход, но применяйте стиль для каждого второго тика. d3 автоматически добавляет некоторые классы, поэтому выбор тиков очень прост. Это то, что они описали в сообщении, с которым вы связались. http://codepen.io/anon/pen/qRLogy?editors=1010

   Key часть: d3.selectAll(".tick text").style("display", function (d, i) { return i % 2 ? "none" : "initial" })