[英]Integrating React with D3
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. 我已经在React中创建了一个表单,其中我输入了一条线的2个坐标,并且我一直试图使用d3来显示该线。 Here is the code so far: 这是到目前为止的代码:
dashboard.js 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 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 . 我收到以下错误Uncaught TypeError:无法读取undefined的属性'svg' 。 The following line is causing the error: 以下行引起该错误:
d3.svg.line()
Do I need to npm install some packages? 我需要npm安装一些软件包吗? 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() . 编辑1:通过使用import *作为“ d3”中的d3解决了指定的错误。d3的最新版本具有d3.line()而不是d3.svg.line() 。 So I made the following change to DrawLine: 因此,我对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. 错了。
I was able to produce the output. 我能够产生输出。 Here is the modified code: 这是修改后的代码:
drawLine.js 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. 主要问题是默认情况下strokeWidth设置为0,因此该行不可见。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.