将React与D3集成

Integrating React with D3

本文关键字：集成 D3 React      更新时间：2023-09-26

我在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:无法读取未定义的属性'svg'。下面这行导致了错误:

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}

出错了。

我能够生成输出。下面是修改后的代码:

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，因此该行不可见。

相关文章：