由浅入深的 D3.js 初级及进阶指南 之一 HelloWorld
任何教程的开端离不开 hello world ,我们也不能免俗. D3.js 拥有中非常强大的对 DOM 进行操作的能力.现在就简单的操作一下.
所需环境:
- ember-cli v3.16.1
- node v10.16.0
- d3.js v5
环境搭建详见 由浅入深的 D3.js (v5/v4) 初级及进阶指南 之零 背景介绍与环境安装
0. 前言
select 方法在 D3.js 中占据中重要的位置.任何 DOM 操作的起点.可以通过此方法,获取到想要操作的 DOM.
这也就是告诉我们,在框架中使用 D3.js 的时候,需要在组件元素或其他元素插入到文档中,大概就是 didInsert 这个声明周期之后,才能进行对 DOM 的操作.
1. 使用 D3.js 展示 Hello world 文本
1.1 创建 d3/hello-world 组件
1ember g component d3/hello-world
原生 JavaScript 的话及可以直接在页面中添加 p 标签.
修改 handlerbars ：
1<p class="d3-hello" {{did-insert this.hello}}></p>
修改 component 逻辑文件:
1import Component from '@glimmer/component';
2import { action } from '@ember/object';
3import {select} from 'd3-selection';
4
5interface D3HelloWorldArgs {}
6
7export default class D3HelloWorld extends Component<D3HelloWorldArgs> {
8 @action
9 hello() {
10 select(".d3-hello").text("HELLOWORLD BY D3")
11 }
12}
在路由中使用此组件：
1{{!-- d3 route file --}}
2<h2>d3-1 helloworld</h2>
3<D3::HelloWorld />
此时运行文件即可以看到：
同样的：
1import Component from '@glimmer/component';
2import { action } from '@ember/object';
3import {select} from 'd3-selection';
4
5interface D3HelloWorldArgs {}
6
7export default class D3HelloWorld extends Component<D3HelloWorldArgs> {
8 @action
9 hello() {
10 let p = select(".d3-hello").text("HELLOWORLD BY D3");
11
12 // 修改此元素的样式
13 p.attr("title","helloWorld").style("color","lightblue")
14 }
15}
这样就可以改变字体的 style 样式了，并为此 P 标签添加了 title 属性，虽然没有什么作用。
更多的关于 d3-selection 的 API 请查看链接。
2. 使用 .datum() / .data() 绑定数据
同样的创建 d3/bind-data 组件。
1{{!-- d3/bind-data.hbs --}}
2<p class="d3-bind" {{did-insert this.dataBind}}></p>
3<p class="d3-bind" {{did-insert this.dataBind}}></p>
4<p class="d3-bind" {{did-insert this.dataBind}}></p>
5<p class="d3-bind" {{did-insert this.dataBind}}></p>
6
7<p class="d3-bind2" {{did-insert this.dataBind2}}></p>
8<p class="d3-bind2" {{did-insert this.dataBind2}}></p>
1// d3/bind-data.ts
2import Component from '@glimmer/component';
3import { selectAll } from 'd3-selection';
4import { action } from '@ember/object';
5
6interface D3BindDataArgs { }
7
8const STR = "DATABIND";
9const ARR = ["落霞与孤鹜齐飞","秋水共长天一色"];
10export default class D3BindData extends Component<D3BindDataArgs> {
11 @action
12 dataBind() {
13 let p = selectAll('.d3-bind');
14 p.datum(STR)
15 p.text(function (d, i) {
16 return `✨第 ${i} 个元素绑定的值是 ${d}✨`
17 })
18 }
19 @action
20 dataBind2() {
21 let ps = selectAll(".d3-bind2");
22 ps.data(ARR).text(function(d) {
23 return d
24 })
25 }
26}
同样的，在路由中使用此组件：
1{{!-- d3 route file --}}
2<h2>d3-1 helloworld</h2>
3<D3::HelloWorld />
4<div class="dropdown-divider"></div>
5<h2>d3-2 bind-data</h2>
6<D3::BindData />
运行程序可以看到：
3. 总结
在这篇文章中,对 D3.js 中 select 及其相关方法应该是有比较深刻的了解,如果没有,那么在以后的教程中我们也是会经常看到的.
更多关于 select 及其相关方法也可以查看此处 .
本系列其他文章:
- 环境搭建
- hello world (使用 D3.js 创建文本并绑定数据)
