D3.js 笔记01

发表于 2016-07-10 更新于 2023-10-07 分类于 JScript 本文字数： 1.2k 阅读时长 ≈ 4 分钟

对于做数据的来说，调度器这个东西应该不是陌生概念，数据流就是靠着调度器调度的，然后进行汇总，整合。但是随着调度器上的任务越来越多,任务之间的依赖变得很复杂，而且有时候有一些任务需要用到重要的模型，报表或者邮件日报中，这就要求用到的这些数据任务流需要进行一些优化，但是没有一个任务依赖图做全局参考，优化有时候不是那么好做，所以近期打算使用D3.js这个库给现有的调度器做一个任务依赖图，可以更好的把控数流。

准备工作

首先需要下载d3.js官网,下载d3.zip文件，解压之后把里面的d3.min.js拷贝到项目里面,我的项目目录路径为

➜  script git:(web-d3.js) ✗ tree
.
├── hello_world.html
├── js
│   └── d3.min.js
└── README.md

d3.min.js文件放在项目目录下的的js文件夹，先来一个Hello World,新建一个hello_world.html`文件，内容如下:

<html>
  <head>
        <meta charset="utf-8">
        <title>HelloWorld</title>
  </head>
    <body>
        <p>Hello World 1</p>
        <p>Hello World 2</p>
        <script src="js/d3.min.js" charset="utf-8"></script>
        <script>
        d3.select("body").selectAll("p").text("www.ourd3js.com");
        </script>
    </body>
</html>

打开浏览器就可以看到效果，所有的<p>标签里面的内容都被替换了。如果换成普通的js来实现也可以，不过得用一个循环，D3所做的事就是减轻你的工作量，以及使你的代码十分简单易懂。下面还有个简单的样例,也是类似余替代循环:

<html>
<head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="js/d3.min.js" charset="utf-8"></script>
<script>
    //选择<body>中所有的<p>，其文本内容为 www.ourd3js.com，选择集保存在变量 p 中
    var p = d3.select("body")
            .selectAll("p")
            .text("www.ourd3js.com");

    //修改段落的颜色和字体大小
    p.style("color", "red")
            .style("font-size", "72px");

</script>
</body>
</html>

上面的代码是先将选中的元素赋值给变量p，然后通过变量p来改变样式，这样可以使代码更整洁。

这里就展示除了D3.js的一个很重要的概念:选择集,像de.select()或d3.sellectAll()选择元素返回的对象都是选择集.
除了选择集，d3.js还可以链式不停的调用函数d3.select().selectAll().text()链式语法。

选择绑定数据

既然是操作数据，当然少不了选择需要操作的元素以及绑定对应的数据到对应的元素上。

选择元素

1 2	d3.select(): 是选择所有指定元素的第一个 d3.selectAll(): 是选择指定元素的全部

上面的函数返回的结果都是返回集,常见用法有:

var body = d3.select("body"); //选择文档中的body元素
var p1 = body.select("p");      //选择body中的第一个p元素
var p = body.selectAll("p");    //选择body中的所有p元素
var svg = body.select("svg");   //选择body中的svg元素
var rects = svg.selectAll("rect");  //选择svg中所有的svg元素

绑定元素

选择元素最终也是为了操作元素，尤其是元素的值，即数据，绑定数据主要用下面两个方法:

1 2	datum(): 绑定一个数据到选择集上 data(): 绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

以具体的例子来看,data()和datum()如何绑定数据:
首先在html代码里面写上几个供测试:

1
2
3

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

datum()

假设有我们有一个字符串，把这个字符串的内容绑定到这三个段落标签：

<script>
    var str = "China";

    var body = d3.select("body");
    var p = body.selectAll("p");

    p.datum(str);

    p.text(function (d, i) {
        return "第 " + i + " 个元素绑定的数据是 " + d;
    });
</script>

运行这段代码的结果如下:

第 0 个元素绑定的数据是 China

第 1 个元素绑定的数据是 China

第 2 个元素绑定的数据是 China

**备注:**匿名函数function(d,i)的应用场景一般是选择集需要使用绑定的数据，两个参数的意思分别是:

d:代表数据，也就是绑定的数据
i:代表索引，代表数据的索引号,从0开始
data()

现在假设我们要把一个数组的元素依次赋值给前面的三个<p>，调用data()绑定数据，并替换成相应的内容:

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
<script src="js/d3.min.js" charset="utf-8"></script>
<script>
    var dataset = ["I like dogs", "I like cats", "I like snakes"];

    var body = d3.select("body");
    var p = body.selectAll("p");

    p.data(dataset)
            .text(function (d, i) {
                return d
            });
</script>

运行结果为:

I like dogs

I like cats

I like snakes

这里的function(d, i)和上面的一样，d代表绑定的数据,i代表选择集元素序号，也是对选择集进行依次设置值

准备工作

选择 绑定数据

选择元素

绑定元素

选择绑定数据