D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图

首先需要下载安装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。包括元素内部的标签。

这里就不给大家举例子了，大家有时间可以自己试一下。

希望可以帮到大家~ 谢谢。