天天看点
返回

D3(一)

一、简介

D3是什么？

D3 的全称是

Data-Driven Documents

 ，它是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实它就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。

由于JavaScript 文件的后缀名通常为 .js，因此 D3 也被称为 D3.js 。D3 提供了各种简单易用的函数，大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ，所以用 JavaScript 也是可以实现所有功能的，但它在数据可视化方面能大大减小我们的工作量。D3 已经将生成可视化的复杂步骤精简到了几个简单的函数，我们只需要输入几个简单的数据，就能够转换为各种绚丽的图形。

为什么要数据可视化？

  • 结合HTML，SVG，CSS，D3可以图形化的，生动的展现数据。是目前最流行的数据可视化库，同时是Github上前端库排行第二（仅次于bootstrap）。
  • 比Processing这样的底层绘图库更简单，比Echarts这样高度封装的图表库更自由。
  • D3基于开源协议BSD-3-Clause3，可以免费用于商业项目。源码托管在GitHub 上star数已达50000多次，有大量用户和丰富友好的案例。

常用的数据可视化工具

  • 用得比较多的是R语言、Python可视化库等
  • 普通用户喜欢用的是 Excel
  • 商业上的产品是Tableau、DOMO、 FineBI等
  • 我们一般喜欢用的是html5canvas、svg和webGL等

D3的优缺点

  • 优点
    • D3最大的优点在于其资料丰富，案例非常多
    • SVG矢量图形的特点是无损缩放，这个优势在显示2D图形式会有非常好的效果，并且兼容各种分辨率
    • SVG图形的节点可以像dom元素一样控制，这就让自主创作图形变得更容易。相对于canvas这也是非常大的优势

  • 缺点
    • SVG是2D矢量图，不能画3D图形。（用2D矢量可以画很多带透视效果的伪3D图，那并不是真正的3D图！）
    • D3.不支持IE6，7，8，如果想要IE8使用D3，请用r2d3.js（一个结合了 Raphael.js的扩展库）
    • SVG的节点都是对象，非常占用内存

学习D3需要哪些必备技能？

D3(一)

二、D3的安装与使用

  1. 在

    html

    中使用 :

    页面直接引入 :

    <script src="https://d3js.org/d3.v6.min.js"></script>
  2. 在

    vue

    项目中使用 ：

    在main.js中引入

    import * as d3 from 'd3'
Vue.prototype.$d3=d3;

三、SVG的基础

D3 提供了众多的 “SVG 图形的生成器”，并且它们”都是只支持 SVG 的”

1、SVG ：可伸缩矢量图形

  • 使用XML格式定义图形
  • 用来定义web上使用的矢量图
  • 改变尺寸图形质量不受损
  • 所有元素属性都可使用动画效果
  • 继承了W3C标准

在HTML中使用SVG有两种方式，可以在HTML文件中直接嵌入svg内容，也可以直接引入后缀名为.svg的文件 如：

/* svg标签，这里的rect为矩形 */
<svg width="200" height="200">
  <rect width="20" height="20" fill="red"></rect>
</svg>

/* 引入后缀名为.svg的文件 */
<img src="demo.svg" alt="测试svg图片">

注意

：svg为inline水平元素。并且需要绘制的所有图形都应被包含在

<svg></svg>

标签内。

2、 SVG中的坐标系

SVG中的坐标系和我们之前认识的不一样，它是y轴向下，顺时针方向的角度为正值。元素的所有操作都是相对自身坐标系进行的。

D3(一)

3、SVG标签的属性

  • 矩形 ：

    <rect></rect>

     
<svg width="200" height="200" style="border: 2px solid #58a">
  <rect x="30" y="30" width="100" height="100" fill="#fb3" stroke="none"></rect>
  //stroke 属性定义矩形边框的颜色
  //stroke-width 属性定义矩形边框的宽度
  //fill 属性定义矩形的填充颜色
</svg>
D3(一)
  • 椭圆 :

    <ellipse>

     
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="190" cy="90" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    //CX属性定义的椭圆中心的x坐标
    //CY属性定义的椭圆中心的y坐标
    //RX属性定义的水平半径
    //RY属性定义的垂直半径
 </svg>
D3(一)
  • 圆形 ：

    <circle></circle>

     
    r属性定义圆的半径
  • 线 :

    <line></line>
  • 路径 :

    <path></path>
  • 文字元素 :

    <text></text>
  • 折线 :

    <polyline></polyline>
  • 多边形 ：

    <polygon></polygon>

     
//折线
<svg width="200" height="200">
  <polyline points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polyline>
  //points：设置各个点的坐标，各组坐标之间使用空格分割，x坐标与y坐标之间使用逗号分割
</svg>
D3(一)

SVG常用标签的使用

四、D3的使用

1、更改HelloWorld

  1. 用js来更改HelloWorld 
<html> 
  <head> 
        <meta charset="utf-8"> 
        <title>HelloWorld</title> 
  </head> 
    <body> 
    <p>Hello World 1</p>
    <p>Hello World 2</p>
        <script>
        var paragraphs = document.getElementsByTagName("p");
        for (var i = 0; i < paragraphs.length; i++) {
          var paragraph = paragraphs.item(i);
          paragraph.innerHTML = "I like dogs";
        }          
        </script> 
    </body> 
</html>

结果为：

I like dogs 
I like dogs
  1. 用 D3 来更改 HelloWorld，只需要一行代码就可以。 
<p>Hello World 1</p>
  <p>Hello World 2</p>
  //一定要先引入D3.js
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>
    d3.select("body").selectAll("p").text("I like dogs");
  </script>

2、选择集

在 D3 中，用于选择元素的函数有两个，这两个函数返回的结果称为选择集。

  • d3.select()：选择所有指定元素的第一个
  • d3.selectAll()：选择指定全部元素

使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。

链式语法:d3.select().selectAll().text()

具体使用：

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 class = body.select(".class");//选择body中class类元素

选择元素函数后常用链式表达接其他操作。例如：改变字体的颜色和大小。原理： 先将选中的元素赋值给变量 p，然后通过变量 p 来改变样式

//选择<body>中所有的<p>，其文本内容为 I like dogs，选择集保存在变量 p 中
var p = d3.select("body")
          .selectAll("p")
          .text("I like dogs");
//修改段落的颜色和字体大小
p.style("color","red")
 .style("font-size","72px");
D3(一)

选择第二个p元素的方法

关于 select 和 selectAll 的参数，其实是符合 CSS 选择器的条件的

一种比较简单的是给第二个元素添加一个 id 或者class，然后，使用 select 选择元素

<p>Pear</p>
<p id="myid">Pear</p>
<p>Pear</p>

var p2 = body.select("#myid");
p2.style("color","red");

3、绑定数据

D3 有一个很独特的功能：能将数据绑定到 DOM 上，也就是绑定到文档上。
  • datum()：绑定一个数据到选择集上
  • data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
4、无名函数 function(d, i)
当”选择集”需要使用”被绑定的数据”时，常需要这么使用
  • d 代表数据，也就是与某元素绑定的数据
  • i 代表索引，代表数据的索引号，从 0 开始

绑定数据的例子：假设现在有三个段落元素如下：

<p></p>
<p></p>
<p></p>

  1. 对于datum()

    假设有一字符串Hello D3，要将此字符串分别与三个段落元素绑定，代码如下：

    var str = "Hello D3";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function (d, i) {
 return "第 " + i + " 个元素绑定的数据是 " + d;
});
    绑定数据后，使用这个数据来修改三个段落元素的内容，其结果如下：
    D3(一)

  2. 对于data()

    有一个数组[“one”,“two”,“three”]，接下来要分别将数组的各元素绑定到三个段落元素上。调用 data() 绑定数据，并替换三个段落元素的字符串为被绑定的字符串，代码如下：

    var dataset = ["one", "two", "three"];
var p = d3.select("body").selectAll("p");

p.data(dataset)
.text(function (d, i) {
  return "This is " + d;
});
    结果自然是三个段落的文字分别变成了数组的三个字符串。
    D3(一)

5、插入元素

  • append()：在选择集末尾插入元素

    在 body 中 p元素后面添加一个段落元素。

    var body = d3.select("body");
body.append("p").text("append p element");

  • insert()：在选择集前面插入元素

    在 body 中 id 为 myid 的元素前添加一个段落元素。

    var body = d3.select("body");
 body.insert("p","#myid").text("insert p element");

6、删除元素

删除元素使用 remove

var p = body.select("#myid");
p.remove();
d3.js
上一篇: d3 is not defined
下一篇: D3 chord

继续阅读