d3.js反応のある行

Question

私はd3を使っていくつかの行をプロットしようとしています。

class TimeSeries extends Component { 
render() { 

    const cabra = this.props. myData 
    const width = this.props.size[1] 
    const height = this.props.size[0] 

    const xScale = scaleLinear().domain([0, 30]) 
    .range([0, this.props.size[0]]) 

    const yScale = scaleLinear().domain([0, 60]) 
    .range([this.props.size[1], 0]) 

    const temperature = myData.temperature 
    const humidity = myData.humidity 

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

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

    let bic = transfData.map((v,i) => { 
     console.log("Passing ",v,"to the sparkline function"); 
     return sparkLine(v) 
     } 
    ) 

    console.log("BIC",bic) 

    const sparkLines = transfData.map((v,i) => 
    <path 
    key={'line' + i} 
    d={sparkLine(v)} 
    className='line' 
    style={{fill:'none',strokeWidth:2, stroke: "red"}} 
    />) 

return <svg width={width} height={height}> 
    <g transform={"translate(0," + (-this.props.size[1]/2) + ")"}> 
     {sparkLines} 
    </g> 
    </svg> 
    } 

線を描くないだけでなく、テストのためにパットたBIC一部がundefined値の配列を印刷している：私は私のページに到達したとき

は基本的に、私は次のサンプルコードを持っています。

は、より多くのテストのために、私はライン関数内いくつかのプリントを置く：

 const sparkLine = d3.line() 
     .x(d => { console.log("Being Called"); return(xScale(d.indice)) }) 
     .y(d => yScale(d.value)) 

しかし、これはconsole.logが印刷されていませんさん。

私は何が間違っているのか分かりません。誰かが私を啓発することはできますか？

Answer 1

A d3 line generatorは、データの配列を引数として想定しています。その配列の各項目に対して、.x()と.y()関数が呼び出されます。あなたのサンプルコードから、各データポイントをラインジェネレータに渡しているように見えます。

代わりtransfDataに渡して試してみて、これはあなたのためにそれを修正するかどうかを確認：

const sparkLines = 
    <path 
    key={'line' + i} 
    d={sparkLine(transfData)} 
    className='line' 
    style={{fill:'none',strokeWidth:2, stroke: "red"}} 
    />