ReactとD3を統合する

Question

私はReactにフォームを作成しました。このフォームでは、2行の座標を入力しましたが、私はd3を使ってその行を表示しようとしていました。

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 

私は次のエラー捕捉されない例外TypeErrorを取得しています：ここではこれまでのコードがある未定義のプロパティ 'SVG' を読み込めません。次の行でエラーが発生しています。

d3.svg.line() 

いくつかのパッケージをインストールする必要がありますか？誰も似たような問題に直面していますか？

編集1：指定されたエラーは、D3の最近のバージョンではなくd3.svg.line（）のd3.line（）を持っている "D3" からD3としてインポート*を使用することで解決しまいました。そこで、私はDrawLineに以下の変更を加えました：

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

私の疑問は、どのようにして直線を描画できますか？現在の文：

{lineGraph} 

がエラーになります。

Answer 1

出力を生成できました。

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 

主な問題は、デフォルトでstrokeWidthが0に設定され、そのためラインが見えなかったしていることである：ここで変更されたコードです。