javascript - 在react app上使用d3js的call函数

Question

我正在使用与 d3js 的 react ，我正在尝试在 svg 元素上插入一个轴。问题是我不知道如何在 React 上使用调用函数。

这是我的渲染函数:

render() {
  const cabra = this.props.cabra
  const width = this.props.size[0]
  const height = this.props.size[1]

  const tmpData = temperature.map((value,index) => {
    return {'indice':index,'value':value}
  })

  const xScale = d3.scaleLinear()
                   .rangeRound([0, width]);
  xScale.domain(d3.extent(tmpData, function(d) { return d.indice; }));

  const yScale = d3.scaleLinear()
                   .rangeRound([height,0]);
  yScale.domain(d3.extent(tmpData, function(d) { return d.value; }));

  const sparkLine = d3.line()
    .x( d => xScale(d.indice) )
    .y( d => yScale(d.value) )

 const sparkLinePaths =
   <path
     d={sparkLine(tmpData)}
     className='line'
     style={{fill:'none',strokeWidth:2, stroke: "red"}}
   />

   const yAxis = axisLeft()
   .scale(yScale)

return <svg width={width} height={height}>
  <g>        
    {sparkLinePaths}
  </g>
</svg>
}

我尝试修改返回值，使其返回轴:

 return <svg width={width} height={height}>
      <g>       
        {yAxis} 
        {sparkLinePaths}
      </g>
    </svg>

但是没有用。谁能帮帮我？

提前致谢，以色列

Answer 1

首先:你的 yAxis常量只是轴生成器，它不绘制任何轴。

大多数 D3 示例使用以下方法绘制轴:首先，它们定义轴生成器(这里我使用 axisBottom )...

var axis = d3.axisBottom(scale);

... 然后是 call组选择的轴:

selection.call(axis);

但是，您不需要使用 call .您可以简单地创建一个变量，该变量已经将轴生成器与轴将在其上绘制的组元素组合在一起。

根据API ,

selection.call(foo);

几乎相同于:

foo(selection);

我说几乎是因为...

The only difference is that selection.call always returns the selection and not the return value of the called function.

因此，您不需要使用 call .只是做:

var axis = d3.axisBottom(scale)(groupSelection);

或者，在您的情况下:

const yAxis = axisLeft().scale(yScale)(groupSelection);

在哪里groupSelection是，当然，与<g>的选择将包含轴的元素。

这是一个演示:

var svg = d3.select("svg");
var scale = d3.scaleLinear().range([10, 290]);
var g = svg.append("g");
var axis = d3.axisBottom(scale)(g);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>