Реакция наклона текста по оси Х D3 - как получить доступ к свойству преобразования? tickFormat?

Question

Я использую гистограмму в React-D3:

Мои метки по оси X врезаются друг в друга, и я хочу повернуть их для удобства чтения,

проблема, решенная здесь для D3 без рендеринга React: http://www.d3noob.org/2013/01/how-to-rotate-text-labels-for-x-axis-of.html

Как мне вписать это решение в пакет React-D3?

Где я могу получить доступ к свойству transform для text или tick?

Я пытался передать в подпункте "xAxisTransform" на BarChart.js, но он не регистрировался.

Должен ли я использовать функцию tickFormat для изменения текста на галочках, если да, то как?

Можно / нужно управлять тиками из /common/axes/AxisTicks.js? https://github.com/esbullington/react-d3/issues/162

Answer 1

В node_modules/react-D3/common/axes/AxisTicks.jsесть оператор переключения (в зависимости от того, где расположены отметки оси на графике), где transform = rotate(-65)можно добавить

Убедитесь, что объявили transform как переменная:

render:function() {
    var props = this.props;

    var tr,
        ticks,
        scale,
        adjustedScale,
        textAnchor,
        transform,
        tickFormat,
        y0, y1, y2, dy, x0, x1, x2, dx;

и внизу, где элемент создан React и возвращен, добавьте его в объект стиля:

React.createElement("text", {
      strokeWidth: "0.01", 
      dy: dy, x: x1, y: y1, 
      style: {stroke:props.tickTextStroke, fill:props.tickTextStroke}, 
          textAnchor: textAnchor,
          transform: transform
      }

Это решает непосредственную проблему, однако, взламывает общие / общие атрибуты для всех тиков оси диаграммы D3.

Если есть лучший способ, пожалуйста, напишите!