[英]d3.js Lines with React
我正在嘗試使用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
值的數組。
為了進行更多測試,我在line函數中放置了一些打印件:
const sparkLine = d3.line()
.x( d => { console.log("Being Called"); return(xScale(d.indice)) })
.y( d => yScale(d.value) )
但是,此console.log從未被打印過。
我不知道我在做什么錯。 有人可以啟發我嗎?
d3 行生成器期望將數據數組作為參數。 對於該數組中的每個項目,您的.x()
和.y()
函數都會被調用。 從示例代碼中,您似乎正在將每個數據點傳遞給行生成器。
嘗試改為傳入transfData
,看看是否可以解決該問題:
const sparkLines =
<path
key={'line' + i}
d={sparkLine(transfData)}
className='line'
style={{fill:'none',strokeWidth:2, stroke: "red"}}
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.