将 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

我收到以下错误 Uncaught TypeError: Cannot read 属性 'svg' of undefined。以下行导致错误：

d3.svg.line()

我需要 npm 安装一些包吗？有人遇到过类似的问题吗？

编辑 1：通过使用 import * as d3 from "d3" 解决了指定的错误 d3 的最新版本有 d3.line() 而不是 d3.svg.line()。所以我对 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，因此线条不可见。

将 React 与 D3 集成

Integrating React with D3

javascript

svg

render

d3.js

reactjs