Question

我正在使用带有Reactjs的d3.js，并试图让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>

所以，如果我要手动为每个刻度创建数据，我需要计算变换以及文本。通常使用call

调用yAxis

`.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那样的东西。特别是，您将重新实现轴组件的至少部分功能，以使其正常工作。

如何手动计算yaxis的数据？

1 个答案: