React 的 d3.js 行答案

【问题标题】：d3.js Lines with ReactReact 的 d3.js 行
【发布时间】：2017-07-18 03:29:19
【问题描述】：

我正在尝试使用 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 永远不会被打印出来。

我不知道我做错了什么。有人能启发我吗？

【问题讨论】：

标签： javascript reactjs d3.js

【解决方案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"}}
  />

【讨论】：