我正在尝试使用 d3 绘制一些线条并使用react。
基本上,当我到达我的页面时,我有以下示例代码:
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 永远不会被打印出来。
我不知道我做错了什么。谁能赐教一下?
最佳答案
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"}}
/>
关于javascript - d3.js 行与 React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45156986/