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 = 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")     //设置圆形的填充色
    }

然后在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())    //4
    }

以上就是查看选择集的状态。

对于选择集如何添加、插入和删除元素 :

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。包括元素内部的标签。

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

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