D3入门文档

时间 2019-11-09

标签 d3 入门文档繁體版

原文原文链接

前言

原本在另外一篇里已经写了一点了，不知为啥，我再编辑更新内容一直保存不了，无奈只能再新建立一篇文章了。html

SVG简介

什么是SVG： SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形，SVG 使用 XML 格式定义图形。SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失。api

SVG 的历史和优点：
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。数组

参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。浏览器

与其余图像格式相比，使用 SVG 的优点在于：网络

SVG 可被很是多的工具读取和修改，好比记事本。
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印。
SVG 可在图像质量不降低的状况下被放大。
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制做地图）
SVG 是开放的标准
SVG 文件是纯粹的 XML
Flash 相比，SVG 最大的优点是与其余标准（好比 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术

SVG元素

rect : x="10" y="10" height="90" width="90" rx="5" ry="5"

x,y就是矩形左上角坐标，rx，ry就是矩形的圆角宽高。

app

circle ： cx="50" cy="150" r="40"

cx、cy就是圆心坐标，r是半径

dom

ellipse ：cx="150" cy="150" rx="50" ry="30"

cx、cy就是圆心坐标，rx、ry就是圆的长宽两个半径

svg

line：x1="10" y1="200" x2="10" y2="300"

（x1,y1）是起点坐标，(x2,y2)是终点坐标。

函数

polyline：points="80,320 130,320 95,400 80,320"

points就是一系列的坐标点，从第一个点开始直线链接下一个点，直到结束。若是你想要图形封闭，能够把起始点再加在末尾。

工具

path: <path d="M50,50 A30,30 0 0,1 35,20 L100,100 M110,11 L100,0" style="stroke:#660000; fill:none;"/>

path元素的全部绘图都在d属性中指定。d属性包含绘制命令。上面的例子中，M发出“移至”命令，A发出“弧”命令，L发出“线段”命令。这些命令都做用在一个“虚拟画笔”。这支笔能够移动，绘制形状等。

这是一个例子

SVG坐标系

在SVG坐标系中，x=0,y=0点在左上角。与正常的图坐标系相比，y轴被反转。随着SVG中y的增长，点、形状等向下移动，而不是向上。

D3简介

D3 的全称是（Data-Driven Documents）, 顾名思义能够知道是一个被数据驱动的文档。D3.js是一个基于数据的操做文档的JavaScript库，可让你绑定任何数据到DOM，支持DIV这种图案生成，也支持SVG这种图案的生成。D3帮助你屏蔽了浏览器差别，作出来图案的效果能够说是炫目得一塌糊涂，但是代码却很简洁。

模块划分

D3能够整个模块安装使用，也能够只安装你须要的模块
下面是我用过的几个模块
Arrays (Statistics, Search, Transformations, Histograms)
数组操做，排序，搜索，总结，统计数据，变换，直方图
Axes
建立坐标轴，以及坐标轴相关的设置，操做等。会建立相关dom元素
Brushes
刷子组件，选择区域用。会建立相关dom元素
Dragging
拖拽组件，用于实现拖拽事件
Scales (Continuous, Sequential, Quantize, Ordinal)
比例尺，会和坐标轴结合使用
Selections (Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)
选择集
Transitions
过渡组件，用来定义一些过渡效果
Zooming
缩放组件
Shapes (Arcs, Pies, Lines, Areas, Curves, Links, Symbols, Stacks)
数据集到几何数据的转换

API

Arrays (d3-array)

数组操做，排序，搜索，统计数据，变换，直方图
 
Statistics（统计）基本的统计数据方法
下面这些方法的第二个参数均可以指定一个可选的访问器函数，这至关于在计算总和以前调用array.map（访问器）。这些方法忽略未定义的和NaN值; 这对忽略缺失数据颇有用。

d3.min - d3.max(array)，d3.min(array)，返回数组的最小值
d3.max - d3.max(array)，返回数组最大值。

与内建的Math.max不一样，此方法忽略未定义的值; 这对忽略缺失数据颇有用。另外，使用天然顺序而不是数字顺序比较元素。例如，字符串[“20”，“3”]的最大值是“3”，而数字[20,3]的最大值是20。

d3.extent - d3.extent(array)，把数组的最小最大值放在一个数组里返回
d3.sum -d3.sum(array)，返回一个数字数组的累计和
d3.mean - 回给定数字数组的平均值。
d3.median - 返回给定数组的中值。
d3.quantile - d3.quantile(array, 0.5)，返回给定数组的分位数。
d3.variance - 返回给定数组的整体方差。
d3.deviation - 返回给定数组的标准误差。

Search

d3.scan

扫描数组，按照比较器比较，返回最小值，相似于min方法。

var array = [{foo: 42}, {foo: 91}];
d3.scan(array, function(a, b) { return a.foo - b.foo; }); // 0
d3.scan(array, function(a, b) { return b.foo - a.foo; }); // 1

d3.ascending(a, b)
d3.descending(a, b)

这两个都是排序的方法，结合array.sort()使用。
 
Transformations
用于转换数组，生成新数组的方法

d3.cross

返回两个数组a和b的笛卡尔乘积

d3.cross([1, 2], ["x", "y"]); // returns [[1, "x"], [1, "y"], [2, "x"], [2, "y"]]
d3.cross([1, 2], ["x", "y"], (a, b) => a + b); // returns ["1x", "1y", "2x", "2y"]

d3.merge

将指定的数组合并到一个数组中, 这种方法相似于内置的数组concat方法; 惟一的区别是当你有一个数组数组时，它更方便。

d3.merge([[1], [2, 3]]); // returns [1, 2, 3]

d3.pairs(array[, reducer])

对于指定数组中的每一个相邻元素对，按顺序调用指定的传递元素i和元素i-1的reducer函数。

d3.pairs([1, 2, 3, 4]); // returns [[1, 2], [2, 3], [3, 4]]
d3.pairs([1, 2, 3, 4], (a, b) => b - a); // returns [1, 1, 1];

Selections (d3-selection)

Selecting Elements
d3选择器对象，有两个属性：_groups:Array(),_parents:Array()。_groups里存的就是选中元素的dom对象

d3.selection

d3.selection() 返回选择根元素（html）的d3选择器对象

d3.select

d3.select('.block')返回选择的元素的D3选择器对象

d3.selectAll

d3.selectAll('.block') 返回匹配的全部的元素的数组
以上3个方法是d3的静态方法，下面这3个对应着相同的原型方法。

selection.select

为每一个选定的元素选择一个匹配的后代元素。

selection.selectAll

为每一个选定元素选择全部匹配的后代。

selection.filter 过滤选定的元素，对每一个选定元素执行filter方法

var even = d3.selectAll("tr").filter(":nth-child(even)");
var even = d3.selectAll("tr:nth-child(even)");
var even = d3.selectAll("tr").select(function(d, i) { return i & 1 ? this : null; });

selection.merge

把已选定的组和另外指定的选择合并成一个选择器。但使用起来要注意，他不能把任意的两个选择合并。

d3.matcher

测试一个元素是否匹配给定的选择器，通常用来和filter结合使用
var div = selection.filter(d3.matcher("div"));

后面还有几个方法，就不一一说了，感受很鸡肋，基本不用，就不说了。。。
Modifying Elements

selection.attr - get or set an attribute.注意不能使用对象的形式一块儿传参数设置。
selection.classed - get, add or remove CSS classes.
selection.style - get or set a style property.

d3.select('.block svg')
.attr('width',500)
.attr('height',500)
.classed('chart first', true)
.classed('chart', false)
.style('background','#f0f')
.style('border','5px solid #0ff')

selection.property

某些HTML元素具备特殊属性，这些属性不能经过属性或样式进行寻址，例如表单字段的文本值和复选框的选中布尔值。使用此方法获取或设置这些属性。

selection.text - get or set the text content.
selection.html - get or set the inner HTML.
selection.append

在所选元素的后面添加一个子元素，并返回该元素的选择器对象

selection.insert

d3.select('svg').insert('line','circle')

在svg里面的第一个匹配到'circle'的元素前面插入一个line元素。

selection.remove - remove elements from the document.
selection.clone - insert clones of selected elements.
selection.sort - sort elements in the document based on data.
selection.order - reorders elements in the document to match the selection.
selection.raise

按顺序从新插入每一个选定元素，使这个选定元素做为其父项的最后一个子项。

selection.lower

按顺序从新插入每一个选定元素，使这个选定元素做为其父项的第一个子项。

d3.create - create and select a detached element.
d3.creator - create an element by name.

这是一个例子

Joining Data
绑定数据

selection.data

绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

selection.enter

返回缺失元素的选择集

selection.exit

返回缺失数据的元素选择集

selection.datum

绑定一个数据到选择集上
 
数据绑定的例子

Scales (d3-scale)

一种计算关系，可以：将某一区域的值映射到另外一区域，其大小关系不变。
这就是比例尺（Scale）
有哪些比例尺
比例尺，很像数学中的函数。例如，对于一个一元二次函数，有 x 和 y 两个未知数，当 x 的值肯定时，y 的值也就肯定了。
在数学中，x 的范围被称为定义域，y 的范围被称为值域。
D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者须要指定 domain 和 range 的范围，如此便可获得一个计算关系。

下面介绍两种最经常使用的比例尺：

Continuous (Linear, Power, Log, Identity, Time)
连续型比例尺包括线性比例尺，指数比例尺，对数比例尺，恒等比例尺，时间比例尺

continuous

计算一个给定的定义域值对应的值域的值，或者说给个x返回y。

continuous.invert

正好和上面的相反，给定一个y，返回x

continuous.domain

设置定义域

continuous.range

设置值域

continuous.rangeRound

和range一样，只是比range多一个功能，即启用舍入。

continuous.clamp
x.clamp(true)
这个方法通俗点说就是：设置为true，当你输入的是domain范围外的值时，返回始终是range范围内的值，一般是range的边界值。对invert也一样；设置为false，输入的是domain范围外的值，返回多是range的范围外的值。
continuous.interpolate

设置输出插值器。
这个方法，主要是知道是插值器，留着之后说吧。