Как рассчитать данные для yaxis вручную?

Question

Я использую d3.js с Reactjs и пытаюсь позволить Reactjs обрабатывать все манипуляции dom и пусть d3.js просто выполняет математику для графика (ов). Это довольно просто, за исключением того, что я испытываю трудности с yAxis. Обычно (если не используется Reactjs) я создаю YAxis как этот

var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 

и добавляет 10 g из tick класса с элементом текста и линии внутри каждого, волшебно вычисления преобразования и текстовое значение (ниже представлены? ??)

<g class="tick" transform="**?**"> 
     <text dy=".32em" x="-9" y="0" style="text-anchor:end">**?**</text> 
     <line x2="-6" y2="0"></line> 
    </g> 

так, если бы я, чтобы создать данные для каждого галочку вручную, мне нужно вычислить преобразование, а также текст. YAxis обычно вызывается с call

`.call(yAxis)` 

, но есть еще один способ, что я могу назвать его так, что я могу генерировать данные для преобразования и текстовое значение для каждого клещ?

Answer 1

Короткий ответ: нет - компонент оси не предназначен для возврата вычисленных значений, он предназначен для рисования оси.

Несколько более длинный ответ заключается в том, что вы можете использовать функцию шкалы .ticks() для генерации значений тика, а затем вычислять позиции соответственно (используя тот же масштаб). Вам вообще не нужен компонент оси. Код будет выглядеть примерно так.

var scale = d3.scale.linear().domain(...).range(...), 
    ticks = scale.ticks(); 

d3.selectAll("g.tick").data(ticks).enter() 
    .append("g") 
    // add tick lines and text 

В общем случае вам обычно лучше использовать D3 для этого, а не что-то другое, как Reactjs. В частности, вы собираетесь переопределить хотя бы часть функциональных возможностей компонента оси, чтобы сделать эту работу должным образом.