d3.js的基础使用

标签：疑惑   ons   divide   move   insert   的区别   nod   理解   pat   

d3的介绍
D3.js（Data-Driven Documents）是一个使用动态图形进行数据可视化的JavaScript程序库。与W3C标准兼容，并且利用广泛实现的SVG、JavaScript和CSS标准
d3和echarts的区别
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，ECharts 提供了常规的折线图、柱状图、散点图、饼图 等等。eharts是封装好的各种的图表可以直接拿来使用，类似于图表模具，直接拿来使用即可。
D3.js就像画笔一样，一切都由你自由发挥。
d3的基础知识
下载并引入d3
使用 npm i d3 进行下载，下载完成后可以使用
const d3 = require("d3")
也可以使用在node_module 中的d3的库

也可以使用线上的库(必须在有网络的情况下才能使用)
>
选择元素
在d3中选择元素的函数有两个：
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可以连缀操作,连缀选择到谁，就是那些元素对象
3可以选择不存在的元素，但是必须使用append进行插入,返回的是插入元素的对象
绑定数据
选择集和绑定数据通常是一起使用的。
datum()：绑定一个数据到选择集上
data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
datum使用：
假设现在有三个段落元素如下。
html

Apple

Pear

Banana

js代码

var str = "China";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
return "第 "+ i + " 个元素绑定的数据是 " + d;
});

结果

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

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

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

总结:

d 代表数据，也就是与某元素绑定的数据。
i 代表索引，代表数据的索引号，从 0 开始。

data使用：
js代码

var dataset = ["I like dog","I like cat","I like snake"];
var body = d3.select("body");
var p = body.selectAll("p");

p.data(dataset)
.text(function(d, i){
return d;
});

结果

I like dog
I like cat
I like snake

上述的数据都是和html是一一对应的，如果我的html元素和数据的个数不对应会怎么样呢。

d3.js中data(), enter() 和 exit()的作用

data()

先看一个例子：

执行代码：

d3.select("body").selectAll("p").data([1, 2, 3])

这里，data()是用来绑定数据到选择的DOM元素上.这样以后，就可以针对这些数据做一些相关操作，比如设置元素宽度等。

从表面上，并不能看出什么变化。但在内部，它是在对应的DOM元素上添加了一个data属性，可以通过document.getElementsByTagName("p")[0].data看到。
总结
data() 选择的是绑定元素和绑定数据一致的部分

enter()和exit()

在上面data()的例子中，我们的DOM元素和数据的个数是一样的。但如果不一样的话，我们该怎么办？

enter()和exit()就是用来处理这种情况的。

enter()

当DOM数量少于data的数量，或者压根一个都没有的时候，我们一般会希望让程序帮忙创建。

下面的例子，我们没有事先提供DOM元素：

仍旧执行：

d3.select("body").selectAll("p").data([1, 2, 3])

与上面例子不同的是，上面的例子中我们可以继续执行.style("width", "100px")等操作。但这里我们不能了，因为我们没有选择到DOM元素，需要先创建。

enter()是用来在绑定数据之后，选择缺少的那部分DOM元素。我们可能会疑惑，既然是缺少的部分，怎么选择呢？这里就需要我们发挥一点想象力，想象我们选择了一些不存在的东西。我们可以称之为“虚拟DOM”或“占位符(placeholder)”。

enter()只是进行选择，并未实际添加所需DOM元素。因此在enter()之后一般都会配合append()来进行DOM元素的实际创建。

由此以来，我们使用 d3.select("body").selectAll("p").data([1,2,3]).enter().append("p") 即可根据数据自动创建所需的DOM元素。

exit()

与enter()相反，exit()是用来选择那些与数据相比多出来的DOM元素。

在下面例子中，我们多提供了一个DOM元素：

这回就容易理解了，因为是多出来的，那么就是实际存在的，即最后一个

。

多出来的话，我们可以接着用.remove()移除这些元素，代码如下：

d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

元素常用的操作
以下可以获取也可以进行设置，设置的时候可以使用回调函数

selection.attr - 设置或获取指定属性。

selection.classed - 添加或删除选定元素的 CSS 类（CSS class）。

selection.style - 设置或删除 CSS 属性。style优先级高于attr。

selection.text - 设置或获取选定元素的标签体文本内容。

selection.html - 设置或获取选定元素的 HTML 内容（类似 innerHTML ）

selection.append - 创建并添加新元素到选定元素后。

selection.insert - 创建并添加新元素到选定元素前。

selection.remove - 从当前文档对象中删除选定的元素。

路径生成器
在svg中的path 标签中的d属性需要放置路径，我们可以在d3中使用路径生成器生成path标签中的d属性的值
高版本使用的是: var liner = d3.line()
版本低的使用:var liner = d3.svg.line()
上面返回的是一个构造函数,该函数下有两个方法：

line.x - 设置或获取x轴访问器.
line.y - 设置或获取y轴访问器

使用方法如下:
//定义曲线生成器

  var liner=d3.line()
  liner.x(function(data,index){ 
           //data调用构造函数传入数组的每个值，index是索引
           return data
  }).y(function(data,index){
          //data调用构造函数传入数组的每个值，index是索引
          return data
  })
  //调用构造生成器
  var data=[1,2,3,4]
  liner(data)

区域生成器
在svg中的path 标签中的d属性需要放置路径，我们可以在d3中使用路径生成器生成path标签中的d属性的值
高版本使用的是： var arear = d3.area()
低版本使用的是： var arear = d3.svg.area()
上面返回的是一个构造函数可以调用如下函数：

area.x - 获取或设置x坐标的访问器.
area.x0 - 获取或设置x0坐标(基线)的访问器.
area.x1 - 获取或设置x1坐标(背线)的访问器.
area.y - 获取或设置y坐标的访问器.
area.y0 - 获取或设置y0坐标(基线)的访问器.
area.y1 - 获取或设置y1坐标(背线)的访问器.

  let area=d3.area()
  .x(function(data,i){
      return scaleX(i)
  })
  .y(function(data){
      return scaleY(data)
  })
  //生成面积
  g.append("path")
  .attr("d",area(dataset))
  .style("fill","blue")

比例尺
我们知道地图有比例尺，作为地图缩放时的标尺。
同样的D3也比例尺。
D3绘制表是需要依赖数据的，有时候数据可能太大或太小，太小的数据如果按照实际绘制导致看不见，太大的数据按照事迹绘制将会超出画布的范围。因此比例尺在D3绘制中是非常重要的。
比例尺分为线性比例尺和序数比例尺
线性比例尺：
能将一个连续的区间，映射到另一区间。要解决柱形图宽度的问题，就需要线性比例尺

例如：

现有一组数据：

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];

有如下要求：将 dataset 中最小的值，映射成 0；将最大的值，映射成 300。

代码如下：

var min = d3.min(dataset);
var max = d3.max(dataset);
//注意高版本的使用的是d3.scaleLiner(),低版本的使用的是d3.scale.linear()
//定义比例尺的构造函数

var linear = d3.scaleLinear()
.domain([min, max])
.range([0, 300]);
//使用如下
linear(0.9); //返回 0
linear(2.3); //返回 175
linear(3.3); //返回 300

注意：这里有两个函数，其中domain()是原来的范围，range()是映射的范围。需要注意他们的写法。
序数比例尺
有时候，定义域和值域不一定是连续的。要让他们一一映射则需要序数比例尺。
建立一个映射关系
例如：

var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

和前面不一样，他们是两个不连续的数组，要求两个数组一一对应

代码如下：
//注意高版本的使用的是d3.scaleOrdinal(),低版本的使用的是d3.scale.ordinal()

var ordinal = d3.scaleOrdinal()
.domain(index)
.range(color);

ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

有的使用我们需要将一些汉字映射到对应的数据可以使用如下

var object=[‘语文‘,‘数学‘,‘物理‘,‘生物‘,‘化学‘,‘英语‘]

我们可以将上面的函数映射成对应的数字
//注意高版本的使用的是d3.scaleBand(),低版本的使用的是d3.scale.ordinal().rangeBands()

var scaleY=d3.scaleBand()
.domain(object)
.rangeRound([0,g_height])
.
console.log(scaleY(‘语文‘)) //0
console.log(scaleY(‘数学‘)) //91
console.log(scaleY(‘英语‘)) //455
//还可以通过scaleY.bandwidth()获取每个映射点的间距

坐标系
v3版本
定义坐标轴的构造函数

var axis_x = d3.svg.axis().scale(比例尺)
.orient(‘top‘) // 刻度与坐标轴方向
.ticks(5) // 分成5等分，有时d3会根据可用空间和它自己的计算多画几个或者少画几个
.tickSubdivide(4) // 每个大刻度之间再画4个等分刻度
.tickPadding(10) // 刻度值与坐标轴之间的距离
.tickFormat(function(v) { // 格式化刻度值
return v + ‘天‘;
});
//使用坐标轴
svg.append(‘g‘)
.call(axis_x)
v4版本
//定义坐标轴的构造函数
var axisY=d3.axisLeft(scaleY).ticks(5) // 分成5等分，有时d3会根据可用空间和它自己的计算多画几个或者少画几个
.tickSubdivide(4) // 每个大刻度之间再画4个等分刻度
.tickPadding(10) // 刻度值与坐标轴之间的距离
.tickFormat(function(v) { // 格式化刻度值
return v + ‘天‘;
});

他的位置可以使用:axisLeft,axisBottom,axisTop,axisRight
//调用

g.append("g").call(axisY)

饼状角度生成器
//定义角度生成器的构造函数

var angle=d3.pie().value(function(d){ return d})
//定义颜色生成器构造函数
var color=d3.schemeCategory10

//生成饼状图

  g.selectAll("path")
  .data(angle(data)) //使用角度
  .enter()
  .append("path")
  .attr("d",arc).attr("fill",function(data,i){
      return color[i]  //使用颜色
  })

d3中可以发送网络请求，可以自行百度，比较简单

d3.js的基础使用

标签：疑惑   ons   divide   move   insert   的区别   nod   理解   pat   

原文地址：https://blog.51cto.com/5493817/2524687