d3.js Lines with React

Question

I am trying to plot some lines using d3 and react.

Basically, when I get to my page, I have the following sample code:

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>
   }

Besides not drawing the lines, The BIC part that was putted for test is printing an array of undefined values.

For more tests, I put some prints inside the line function:

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

But this console.log is never being printed.

I don't know what I'm doing wrong. Can someone enlighten me?

Answer 1

A d3 line generator expects an array of data as the argument. For each item in that array your .x() and .y() functions will get called. From your example code it looks like you're passing each data point to the line generator.

Try passing in transfData instead and see if this fixes it for you:

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