Fork me on GitHub

JavaScript d3使用指南

字数统计: 2.1k字   |   阅读时长≈ 9分

JavaScript d3使用指南

1. 如何在项目中使用d3:

  1. 如果是要在网站上使用d3效果的话，那么可以直接在script中引用官方直接给的网络库
    1
    <script src="https://d3js.org/d3.v5.js"></script>
  2. 如果要在本地运行或者调试，亦或者自己搭建服务器，可以直接下载到本地进行使用。
    1
    <script> src="path/...../d3.js"</script>
    (这个script可以单独成行)

官网:https://d3js.org/

2. d3基本思想

d3是基于选择数据和绑定数据进行工作的。

1
2
3
4
5
6
7
8
9
10
<body>
<p></p>
<p></p>
<script src="https://d3js.org/d3.v5.js"></script>
<script>
    let p = d3.select('body')
        .selectAll("p");
    p.text("伊雷娜和沙耶贴贴~~~")
</script>
</body>

解释一下代码:

  1. 我们声明了一个对象 p 并通过 d3.select这个方法让它选择了html中的body,然后通过selectAll选择了body中的所有’p’标签。

  2. 之后对p的操作就相当于对body中所有的p标签进行操作了

  3. 然后我们通过text方法向p,即所有的p标签中加入了文字。(伊雷娜和沙耶快结婚！！！)

可以自己在html中试一试这一段代码(仔细看，我是直接引用了网络上的d3库，所以在网上都可以正常运行)

3. 选定元素与绑定数据

1.选择元素

d3中有两个选择元素的函数:

  • select (选择第一个符合的)
  • selectAll (选择所有符合的)

比如:

1
2
3
4
var body = d3.select("body"); //选择html文档中的body元素
var svg = body.select("svg"); //选择body中的svg元素,注意声明了body后，就可以把body当作一个新的d3对象使用(大概这个意思)
var p = body.selectAll("p"); //选择body中所有的p元素
var p1 = body.select("p"); //选择body中第一个p元素

2.绑定数据

d3提供一个把数据绑定在一个dom对象的函数(可以理解为赋值)。

  • data() : 把一个数组绑定到一个选择的对象上，进行 一一对应。
  • datum() : 把一个数据绑定到 所有选择集 上。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<p>刻晴</p>
<p>甘雨</p>
<p>优菈</p>
<script src="https://d3js.org/d3.v5.js"></script>
<script>
    var str = '个老婆';
    var p = d3.select("body")
            .selectAll("p");

    p.datum(str)
        .text(function (d, i) {
            return "这是我" + (i+1) + d;
        })
</script>
</body>

说明:

  1. 将str与p中所有的数据绑定

2.通过无名函数function进行访问,其中i代表索引编号,而d代表绑定的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<p></p>
<p></p>
<p></p>
<script src="https://d3js.org/d3.v5.js"></script>
<script>
    var dataset = ['甘雨', '刻晴', '优菈'];
    var p = d3.select("body")
            .selectAll("p");

    p.data(dataset)
        .text(function (d, i) {
            return d + "是我老婆";
        })
</script>
</body>

说明:

  1. 把dataset中的第i个数据与p中第i个对象绑定

  2. 利用无名函数访问

一些说明:

假如使用data,然而dataset中与绑定的对象数目不同,那么该怎么办的？

d3中就提供了3个函数来解决这个问题:

  • 假如数据比对象多,那么d3就会自动创建对象与多余的数据绑定:
    • enter: 自动创建的对象与数据绑定的部分被成为”enter”
    • update: 原本的的对象与数据绑定的部分被称为”update”
  • 假如对象比数据多,那么d3就会自动创建对象与多余的数据绑定:
    exit: 没有数据绑定的部分被称为”exit”
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <body>
        <p>优菈</p>
        <p>刻晴</p>
        <p>胡桃</p>
        <script>
        	var dataset = ['甘雨','诺艾尔','砂糖','芭芭拉','莫娜'];
        	var p = d3.select("body")
        		.selectAll("p");
        	var update = p.data(dataset)
        	var enter = update.enter();
        	update.text(function(d,i){
        		return "我的第" + i + "个老婆:" + d;
        	})
        	var pEnter = enter.append("p")
        	pEnter.text(function(d,i){
                return "我的第" + i + "个老婆:" + d;
        	})
        </script>
      </body>

4. 选择，插入， 删除元素

选择

  • 我们知道,在用d3操作对象的时候，对象是可以通过编号索引的，所以可以通过对编号的引用来操作
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <body>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <script>
        	var dataset = ['甘雨','诺艾尔','砂糖','芭芭拉','莫娜'];
        	var p = d3.select("body")
        		.selectAll("p");
        	var update = p.data(dataset)
        	var enter = update.enter();
        	update.text(function(d,i){
        	    if(i == 2)
        	        d3.select(this).style("color", "blue");
        		return "我的第" + i + "个老婆:" + d;
        	})
        </script>
      </body>
  • 通过class来选择
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <body>
        <p></p>
        <p class = "myP"></p>
        <p></p>
        <p></p>
        <p></p>
        <script>
        	var dataset = ['甘雨','诺艾尔','砂糖','芭芭拉','莫娜'];
        	var p = d3.select("body")
        		.selectAll("p");
        	var update = p.data(dataset)
        	var enter = update.enter();
        	update.text(function(d,i){
        		return "我的第" + i + "个老婆:" + d;
        	})
            var d = d3.select("body")
                .selecAll(".myP");
        	d.style("style", "blue")
        </script>
      </body>
    如果是class定义的话，在名称前加’.’,如果是通过id定义的话，前面加’#’。

插入元素

d3提供了两种插入函数:

  • append() : 在选择集尾部插入元素
  • insert() : 在选择集头部插入元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <body>
    <p>甘雨</p>
    <p id="myP">诺艾尔</p>
    <p>砂糖</p>
    <p>芭芭拉</p>
    <p>莫娜</p>
    <script>
        var d = d3.select("body")
                .append("p")
                .text("优菈！！")
                .style("color", "blue");
    </script>
    </body>

删除元素

删除很简单，直接使用remove即可

1
2
3
var p = d3.select("body")
    		.select("#myP")
    		.remove();

这样就直接删除了id为’myP’的对象。

制作简单的图表

首先我们需要明确一下制作图标的思路:

  • 生成svg画布
  • 使用d3中的rect元素对svg进行赋值，即各类参数
  • 在完成赋值之前，需要我们自己去设计数据，让d3进行数据转化，从而赋值给svg。

那么我们的具体步骤就是:

  1. 设定数据

    1
    2
    var marge = {top: 60, bottom: 60, left: 60, right:60};
    var dataset = [233, 466 , 699];

  2. 生成svg画布,并生成操作对象

    1
    2
    3
    var svg = d3.select("svg");//得到svg画布
        	var g = svg.append("g")//生成一个对象来装这个svg
        		.attr("transform","translate("+marge.top+","+marge.left+")");//此处使用的是字符拼接

  3. 画出矩阵
    在html的坐标中,(0, 0)点位于左上角，水平向右为x坐标，垂直向下为y坐标

由于画出向上延伸的图标比较困难,那么这里就按照向上画的举出例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body>
<svg></svg>
<script>
    var margin = {top: 80, bottom: 60, left: 70, right: 60};//用于设定表格的位置
    var dataset = [];
    for(var i = 0; i < 20; ++i)
        dataset[i] = Math.random() * 600;
    var svg = d3.select("svg")
        .attr("width", window.innerWidth)
        .attr("height", window.innerHeight);
    //↑将svg画布充满整个屏幕，当然也可自行调整，注意：如果svg过小，可能里面的内容显示不全，所以需要注意
    var g = svg.append("g")//可以理解为把svg与g绑定在一起
            .attr("transform", "translate(" + margin.top + "," + margin.left + ")");//设定左上角位置
    var height = 0.8 * window.innerHeight, width = 0.8 * window.innerWidth;
    var rectWidth = width / dataset.length; //每个柱子的宽度
    g.selectAll("rect")
        .data(dataset)//选中所有的rect对象进行操作
        .enter()//由于都是新生成的，所以当然要用enter()了,这是上一节内容。
        .append("rect")//自动补充rect对象与数据进行绑定
        .attr("x", function (d, i) {
            return i * rectWidth;
        })
        .attr("y", function (d, i){//由于高度是从上往下延伸的，所以柱子y轴开始的地方应该是它的顶端
            return height - d;
        })
        .attr("width", rectWidth * 0.9)
        .attr("height", function (d) {
            return d;
        })
        .attr("fill", "blue");//颜色
</script>
</body>

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true


   退役OIer，现役ACMer，人工智能专业的苦逼大学牲

   会记录一些ACM/OI中的一些算法和题目，以及一些在学校上的课的内容，比如AI之类的

  和一些自己感兴趣的东西。
  感谢访问