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：无法读取属性＆＃39; svg＆＃39;未定义。以下行导致错误：

d3.svg.line()

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

编辑1：使用import *作为来自＆＃34; d3＆＃34;的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集成

1 个答案: