Блог

Я создал горизонтальную гистограмму / диаграмму строк и изо всех сил пытаюсь выровнять тики по оси Y по вертикали с центром моих столбцов.

Для создания оси Y я использую следующий код:

 var yScale = d3.scale.ordinal()
  .domain(data.map(function (d) {
    return d.subject;
  }));
  .rangeRoundBands([0, height]);

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
  

И создание моих баров таким образом:

   // Render the bars
  svg.selectAll('bar')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', 1)
    .attr('y', function (d) {
      return yScale(d.subject);
    })
    .attr('width', function (d) {
      return xScale(d.value)
    })
    .attr('height', barHeight)
    .attr('fill', function (d, i) {
      return color(i);
    });
  

Я хотел бы иметь возможность устанавливать высоту моей диаграммы на любое значение и правильно выравнивать тики.

JSFiddle

Проблема, с которой вы столкнулись, заключается в том, что вы присвоили произвольное barHeight значение 40 единиц.

Когда вы используете порядковую шкалу с rangeRoundBands , d3 вычисляет размер полосы для вас. Вы должны использовать это значение для высоты вашего бара. Вы можете получить доступ к значению, которое было рассчитано для ваших полос, как ordinal.rangeBand , или в вашем конкретном случае, yScale.rangeBand .

 // instead of `barHeight`
.attr('height', yScale.rangeBand);
  

Чтобы все ваши столбики не касались друг друга, вы можете задать второй параметр вашему rangeRoundBands методу, который является заполнением между полосами. Поиграйте со значениями для заполнения, пока не получите желаемый результат.

Вот обновленный JSFiddle