首先需要下载安装d3.js : yarn add d3
然后在组建中引入 : import * as d3 from 'd3'
然后定义一个方法，在componentDidMount()这个钩子函数中调用即可。
然后如何绘制一个矢量图 :
render() {
return (
<div id="drawSVG" ></div>
);
}
先定义一个id为drawSVG的div标签。然后写一个方法，来在这个div中绘制矢量图。
oneMethod() { //定义一个方法
var width = ; //定义svg的宽度
var height = ; //定义svg的高度
var svg = d3.select("#drawSVG") //选择容器
.append('svg') //将svg放入容器里面
.attr("width", width) //设置svg的宽度
.attr("height", height) //设置svg的高度
.style("background-color", "red") //设置svg的背景颜色
.style("border-radius", "50%") //设置svg的圆角
svg.append("circle") //在<svg>中添加<circle>标签
.attr("cx", "200px") //设置圆形的x坐标
.attr("cy", "200px") //设置圆形的y坐标
.attr("r", "100px") //设置圆形的半径
.attr("fill", "yellow") //设置圆形的填充色
}
然后在componentDidMount()中调用。
componentDidMount() {
this.oneMethod()
}
最后来看看会显示出什么样的矢量图行呢。。。
全部代码 :
import React, { Component } from 'react';
import * as d3 from 'd3';
class Demo extends Component {
constructor(props) {
super(props);
this.state = {}
}
componentDidMount() {
this.oneMethod()
}
oneMethod() { //定义一个方法
var width = 400; //定义svg的宽度
var height = 400; //定义svg的高度
var svg = d3.select("#drawSVG") //选择容器
.append('svg') //将svg放入容器里面
.attr("width", width) //设置svg的宽度
.attr("height", height) //设置svg的高度
.style("background-color", "red") //设置svg的背景颜色
.style("border-radius", "50%") //设置svg的圆角
svg.append("circle") //在<svg>中添加<circle>标签
.attr("cx", "200px") //设置圆形的x坐标
.attr("cy", "200px") //设置圆形的y坐标
.attr("r", "100px") //设置圆形的半径
.attr("fill", "yellow") //设置圆形的填充色
}
render() {
return (
<div id="drawSVG" ></div>
);
}
}
export default Demo;
什么是选择集 :
d3.select和d3.selectAll返回的对象称为选择集(selection), 添加、删除、设定网页中的元素, 都得使用选择集.
详解select与selectAll:
selsect : 返回匹配选择器的第一个元素
d3.select("body") //选择body元素
d3.select("#drawSVG") //选择id为drawSVG的元素
d3.select(".xxx") //选择class为xxx的第一个元素 selectAll: 返回匹配选择器的所有元素
d3.selectAll("p") //选择所有的p元素
d3.selectAll(".xxx") //选择class为xxx的所有元素
d3.selectAll("ul li") //选择ul中所有的li元素
查看选择集的状态有三个函数 :
查看选择集的状态，有三个函数 :
selection.empty() : 如果选择集为空,则返回true。如果不为空,返回false;
selection.node() : 返回第一个非空元素,如果选择集为空,返回null;
selection.size() : 返回选择集中的元素个数;
举例子 :
render() {
return (
<div id="drawSVG" >
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
);
}
oneMethodAgain(){
var paragraphs = d3.selectAll("p")
console.log(paragraphs.empty()) //false
console.log(paragraphs.node()) //<p>窗前明月光</p>
console.log(paragraphs.size()) //
}
以上就是查看选择集的状态。
对于选择集如何添加、插入和删除元素 :
1 对于选择集 , 添加、插入和删除元素 :
2 selection.append(name) :
3 在选择集的末尾添加一个元素,name为元素名称。
4 selection.insert(name,[,before]) :
5 在选择集中的指定元素之前插入一个元素,name是被插入的元素名称,before是css选择器名称。
6 selection.remove() :
7 删除选择集中的元素。
举例子 :
render() {
return (
<div id="drawSVG" >
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p id="plane" >举头望明月</p>
<p>低头思故乡</p>
</div>
);
}
还是这些内容来举例 。
oneMethodAgains() {
var body = d3.select("#drawSVG")
//在id为drawSVG的div中的最末尾添加一个p元素
body.append("p")
.text("静夜思")//内容
.style("color", "red")//字体颜色
//在id为plane的p元素前添加一个p元素
body.insert("p", "#plane")
.text("~~~~") //内容
.style("color", "yellow") //字体颜色
//删除id为plane的元素
var plane = d3.select("#plane")
plane.remove()
}
显示效果分别为 :
如何设定和获取属性 :
设定和获取属性 :
selection.attr(name[,value]) :
设置或获取选择集的属性,name是属性名称,value是属性值。如果省略value，则返回当前的属性值。
selection.classed(name[,value]) :
设定或获取选择集的css类，name是类名,value是一个布尔值。表示是否开启。
d3.select("p")
.classed("xxx",true) //开启xxx类
.classed("sss",false) //不开启sss类
selection.style(name[,value[,priority]]) :
设定或获取选择集的样式,name是样式名,value是样式值;
selection.property(name[,value]) :
设定或获取选择集的属性,name是属性名,value是属性值。如果省略value，则返回属性名。
有部分属性不能用attr()设定和获取，最经典的是文本输入框的value属性，此属性不会再标签中显示。
selection.text([value]) :
设定或获取选择集的文本内容，如果省略value，则返回当前的文本内容。文本内容相当于DOM的innerText，不包括元素内部的标签。
selection.html([value]) :
设定或获取选择集的内部HTML内容，相当于DOM的innerHTML。包括元素内部的标签。
这里就不给大家举例子了，大家有时间可以自己试一下。
希望可以帮到大家~ 谢谢。