Integrating React with D3

Question

I have created a form in React wherein I input the 2 coordinates of a line and I've been trying to use d3 to display the line. Here is the code so far:

dashboard.js

import DrawLine from './d3/drawLine.js';
var Dashboard: React.createClass({
    .......
    .......
    render: function(){
      return(
       <div className="dashboard">
       <Dashform onFormSubmit={this.handleFormSubmit} />
       <DrawLine x1={this.state.x1} y1={this.state.y1} x2={this.state.x2} y2={this.state.y2} />
       </div>
      );
    }
  });
var Dashform: React.createClass({
   ....
   .....
  }};
export default Dashboard

drawLine.js

import React from 'react';
import d3 from 'd3';
var DrawLine = React.createClass({
    propTypes: {
       x1:React.PropTypes.number,
       y1:React.PropTypes.number,
       x2:React.PropTypes.number,
       y2:React.PropTypes.number
    },
    render: function(){

         var lineData = [ { "x": this.props.x1,   "y": this.props.y1 },
                          { "x": this.props.x2,   "y": this.props.y2 } ];

         var lineFunction = d3.svg.line()
                  .x(function(d) { return d.x; })
                  .y(function(d) { return d.y; })
                  .interpolate("linear");


         var svgContainer = d3.select("body").append("svg")
                  .attr("width", 200)
                  .attr("height", 200);


         var lineGraph = svgContainer.append("path")
                .attr("d", lineFunction(lineData))
                .attr("stroke", "blue")
                .attr("stroke-width", 2)
                .attr("fill", "none");

         return(
          <div>
           <svg width = "500" height = "500" >
             {lineGraph}
           </svg>
          </div>
        );
     }
 });
 export default DrawLine

I am getting the following error Uncaught TypeError: Cannot read property 'svg' of undefined . The following line is causing the error:

d3.svg.line()

Do I need to npm install some packages? Has anyone faced a similar problem?

Edit 1: The specified error got resolved by using import * as d3 from "d3" The recent version of d3 has d3.line() instead of d3.svg.line() . So I made the following change to DrawLine:

 var lineFunction = d3.line()
                  .x(function(d) { return d.x; })
                  .y(function(d) { return d.y; });

My question is that how can I render the straight line ?? Currently the statement:

    {lineGraph}

is erroring out.

Answer 1

I was able to produce the output. Here is the modified code:

drawLine.js

import React from 'react';
import ReactDOM from 'react-dom';
import events from 'events';
import * as d3 from 'd3';
var DrawLine = React.createClass({
    propTypes: {
       x1:React.PropTypes.number,
       y1:React.PropTypes.number,
       x2:React.PropTypes.number,
       y2:React.PropTypes.number
      },
    render: function(){

           var lineData = [
                  { "x": this.props.x1,   "y": this.props.y1 },
                  { "x": this.props.x2,   "y": this.props.y2 } ];

           var lineFunction = d3.line()
                   .x(function(d) { return d.x; })
                   .y(function(d) { return d.y; })

           return(
              <svg>
               <g>
                 <path className = "drawLine" stroke="blue" strokeWidth="2" d = {lineFunction(lineData)} />
               </g>
              </svg>
           );
       }
   });
   export default DrawLine

The main problem was that the strokeWidth by default is set to 0, and so the line was not visible.