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

一個d3 line generator需要一個數據數組作爲參數。對於該陣列中的每個項目，您的.x()和.y()函數都會被調用。從你的示例代碼看起來你將每個數據點傳遞給行生成器。

嘗試傳遞transfData代替，看看這個修復它爲您：

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