数据可视化js框架 d3.js入门

[一] 选择元素绑定数据

1.下载、引入d3.js
2.d3.select()：选择所有指定元素的第一个
3.d3.selectAll() ：选择指定元素的全部

eg:

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

如何绑定数据

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

datum():

<p>apple</p>
<p>pear</p>
<p>banana</p>

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

data():

var dataset = ['i likes dogs', 'i like cats', 'i likes snakes'];
p.data(dataset).text(function(d, i){  // 引入data绑定return d;
});

输出:

i likes dogs
i like cats
i likes snakes

[二] 选择、插入、删除元素

选择参数

通过类名、id名选择参数。
d3.select('#box').style('background','pink');

插入元素

append()：在选择集末尾插入元素
d3.select('.orange').append("p").text(" 选择集后插入元素 ");
insert()：在选择集前面插入元素
d3.select('body').insert("p","#box").text(" 选择集前插入元素 ");

结果：

apple
pear
选择集前插入元素
banana
选择集后插入元素

删除元素

remove()：删除选择集
d3.select('#orange').remove();

[三] 制作简单图表

SVG:
可缩放矢量图形。是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。

添加画布

var width = 300;  //画布的宽度
var height = 300;   //画布的高度
var svg = d3.select("body")     //选择文档中的body元素.append("svg")          //添加一个svg元素.attr("width", width)       //设定宽度.attr("height", height);    //设定高度

绘制矩形
横向柱形图。只绘矩形，不绘文字和坐标轴

<svg>
<rect></rect>
<rect></rect>
</svg>

rect矩形属性：

x：矩形左上角的 x 坐标
y：矩形左上角的 y 坐标
width：矩形的宽度
height：矩形的高度

当：有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。

var dataset = [250, 210, 170, 130, 350];var rectHeight = 25;svg.selectAll("rect") //选择svg内所有的矩形.data(dataset)      //绑定数组.enter()            //指定选择集的enter部分.append('rect')     //添加足够数量的矩形元素.attr('x', 20).attr('y', function(d, i){return i * rectHeight;}).attr('width', function(d, i){return d;}).attr('height', rectHeight - 2).attr('fill', 'steelblue');   //给矩形元素设置颜色 css最好外置。rect的颜色属性是：fill:red

[四] 比例尺

对于一元二次函数，有x\y两个未知数，当x的值确定时，y值也确定。x的方位被称为定义域，y的方位成为值域
d3指定定义域domain和值域range，既能得到一个计算关系。

线性比例尺
能将一个连续的区间，映射到另一区间。

var data = [1.2, 2.3, 0.9, 1.5, 3.3];
// 要求：将最小的值映射成0，最大的值映射成300.
var min = d3.min(data);
var max = d3.max(data);
var linear = d3.scale.linear()    // 定义线性比例尺.domain([min, max])         // 定义域.range([0, 300]);           // 值域
linear(0.9);
linear(2.3);
linear(3.3);

d3.scale.linear() 的返回值，是可以当做函数来使用的。因此，才有这样的用法：linear(0.9)。

序数比例尺

定义域和值域不连续时

//序数比例尺
// 要求： 0 对应颜色 red，1 对应 blue，依次类推。
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
var ordinal = d3.scale.ordinal()    // 定义序数比例尺.domain(index).range(color);
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

给柱形图添加比例尺

结合制作简单图表和线性比例尺制作：

var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];var linear = d3.scale.linear().domain([0, d3.max(dataset)]).range([0, 250]);var width = 300;var height = 300;var svg = d3.select("body").append('svg').attr("width", width).attr("height", height);var rectHeight = 25;svg.selectAll("rect").data(dataset).enter()            //指定选择集的enter部分.append('rect')     //添加足够数量的矩形元素.attr('x', 20).attr('y', function(d, i){return i * rectHeight;}).attr('width', function(d, i){return linear(d);}).attr('height', rectHeight - 2).attr('fill', 'steelblue');

[五]坐标轴

坐标轴，是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的，需要用其他的元素组合构成。D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。

坐标轴由什么构成
在 SVG 画布的预定义元素里，有六种基本图形：

矩形
圆形
椭圆
线段
折线
多边形
路径 // 功能最强的元素

分组元素 是 SVG 画布中的元素，意思是 group。此元素是将其他元素进行组合的容器，在这里是用于将坐标轴的其他元素分组存放。

定义坐标轴
在上一章的数据和比例尺的基础上：

在 SVG 中添加坐标轴
定义了坐标轴之后，只需要在 SVG 中添加一个分组元素，再将坐标轴的其他元素添加到这个里即可。代码如下：

var width = 300;
var height = 300;
var svg = d3.select("body").append('svg').attr("width", width).attr("height", height);//给柱形图添加比例尺
var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];//定义比例尺
var linear = d3.scale.linear().domain([0, d3.max(dataset)]).range([0, 250]);var rectHeight = 25;  // 每个矩形所占的像素高度（包括空白）svg.selectAll("rect").data(dataset).enter()                  //指定选择集的enter部分.append('rect')           //添加足够数量的矩形元素.attr('x', 20).attr('y', function(d, i){return i * rectHeight;}).attr('width', function(d, i){return linear(d);}).attr('height', rectHeight - 2).attr('fill', 'steelblue');//定义坐标轴
var axis = d3.svg.axis()    // D3 中坐标轴的组件，能够在 SVG 中生成组成坐标轴的元素。.scale(linear)            //指定比例尺.orient('bottom')         //指定刻度的方向.ticks(7);                //指定刻度的数量svg.append("g").attr("class", "axis").attr("transform", "translate(20,130)").call(axis);

[六]完整柱形图

css

.axis path,
.axis line{fill:none;stroke:black;shape-rendering:crispEdges;}
.axis text{font-family:sans-serif;font-size:11px;}
.MyRect{fill:steelblue;}
.MyText{fill:white;text-anchor:middle;}

/*添加svg画布*/// 画布大小var width = 400;var height = 400;//在body里添加一个svg画布var svg = d3.select('body').append('svg').attr('width', width).attr('height', height);//画布周边的空白var padding = {left: 30, right: 30, top: 20, bottom: 20};/*定义数据和比例尺*/var dataset = [10, 20, 30, 40, 33, 24, 12, 5];//x轴的比例尺var xScale = d3.scale.ordinal()   //序数比例尺.domain(d3.range(dataset.length)).rangeRoundBands([0, width - padding.left - padding.right]); //用几个离散区间来分割一个连续的区间，区间边界和宽度会取整// y轴的比例尺var yScale = d3.scale.linear()  //线性比例尺.domain([0, d3.max(dataset)]).range([height - padding.top - padding.bottom, 0]);/*定义坐标轴*///x轴var xAxis = d3.svg.axis().scale(xScale).orient('bottom');//y轴var yAxis = d3.svg.axis().scale(yScale).orient('left');/*添加矩形和文字元素*///矩形之间的空白var rectPadding = 4;//添加矩形元素var rects = svg.selectAll('.MyRect').data(dataset).enter().append('rect').attr('class', 'MyRect').attr('transform', 'translate(' + padding.left + ',' + padding.top + ')').attr('x', function(d, i){return xScale(i) + rectPadding / 2;}).attr('y', function(d, i){return yScale(d);}).attr('width', xScale.rangeBand() - rectPadding).attr('height', function(d){return height - padding.top - padding.bottom - yScale(d);}).attr('fill', 'steelblue');//添加文字元素var texts = svg.selectAll('.MyText').data(dataset).enter().append('text').attr('class', 'MyText').attr('transform', 'translate(' + padding.left + ',' + padding.top + ')').attr('x', function(d, i){return xScale(i) + rectPadding / 2;}).attr('y', function(d, i){return yScale(d);}).attr('dx', function(d, i){return (xScale.rangeBand() - rectPadding) / 2;}).attr('dy', function(d, i){return 20;}).text(function(d){return d;});// 矩形元素和文字元素的 x 和 y 坐标要特别注意，要结合比例尺给予适当的值。/*添加坐标轴*///添加x轴svg.append('g').attr('class', 'axis').attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")").call(xAxis);//添加y轴svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + padding.top + ")").call(yAxis);

[七]让图表动起来

实现动态的方法

transition()
过渡

.attr("fill","red")         //初始颜色为红色
.transition()               //启动过渡
.attr("fill","steelblue")   //终止颜色为铁蓝色

duration()
指定过渡的持续时间，单位为毫秒。
如 duration(2000) ，指持续 2000 毫秒，即 2 秒。
ease()
指定过渡的方式，常用的有：

linear：普通的线性变化
circle：慢慢地到达变换的最终状态
elastic：带有弹跳的到达最终状态
bounce：在最终状态处弹跳几次

调用时，格式形如： ease(“bounce”)。

delay()
指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。
对整体指定时：

.transition()
.duration(1000)
.delay(500)

如此，图形整体在延迟 500 毫秒后发生变化，变化的时长为 1000 毫秒。因此，过渡的总时长为1500毫秒。

对一个一个的图形（图形上绑定了数据）进行指定时：

.transition()
.duration(1000)
.delay(funtion(d,i){return 200*i;
})

如此，假设有 10 个元素，那么第 1 个元素延迟 0 毫秒（因为 i = 0），第 2 个元素延迟 200 毫秒，第 3 个延迟 400 毫秒，依次类推….整个过渡的长度为 200 * 9 + 1000 = 2800 毫秒。

实现简单的动态效果
下面将在 SVG 画布里添加三个圆，圆出现之后，立即启动过渡效果。
第一个圆，要求移动 x 坐标。

var circle1 = svg.append("circle").attr("cx", 100).attr("cy", 100).attr("r", 45).style("fill","green");//在1秒（1000毫秒）内将圆心坐标由100变为300
circle1.transition().duration(1000).attr("cx", 300);

第二个圆，要求既移动 x 坐标，又改变颜色。

var circle2 = svg.append("circle").attr("cx", 100).attr("cy", 100).attr("r", 45).style("fill","green"); //与第一个圆一样，省略部分代码//在1.5秒（1500毫秒）内将圆心坐标由100变为300，
//将颜色从绿色变为红色
circle2.transition().duration(1500).attr("cx", 300).style("fill","red");

第三个圆，要求既移动 x 坐标，又改变颜色，还改变半径。

var circle3 = svg.append("circle").attr("cx", 100).attr("cy", 100).attr("r", 45).style("fill","green"); //与第一个圆一样，省略部分代码//在2秒（2000毫秒）内将圆心坐标由100变为300
//将颜色从绿色变为红色
//将半径从45变成25
//过渡方式采用bounce（在终点处弹跳几次）
circle3.transition().duration(2000).ease("bounce").attr("cx", 300).style("fill","red").attr("r", 25);

给柱形图加上动态效果
在上一章完整柱形图的基础上稍作修改，即可做成一个带动态效果的、有意思的柱形图。

.attr("y",function(d){var min = yScale.domain()[0];return yScale(min);
})
.transition()
.delay(function(d,i){return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y",function(d){return yScale(d);
});

参考：http://wiki.jikexueyuan.com/project/d3wiki/selection.html
d3 API中文手册：https://github.com/d3/d3/wiki/API–%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C

数据可视化js框架 d3.js入门相关推荐

一个JS框架D3.js
最近有点不务正业,好吧,诚恳一点面对现实.许多时候我想等我把某些问题,完全想明白,完全理解透,再写点东西:事实往往相反,发现等我真正接近,把某些东西理解好,我自己再也不屑写点东西分享了,没有精神气也好 ...
基于Vue的数据可视化设计框架，数据大屏可视化编辑器
开发文档(★★★★★) 请访问 https://lizhensheng.github.io/vue-data-view/ 完整代码下载地址:基于Vue的数据可视化设计框架,数据大屏可视化编辑器简介 ...
移动手机应用开发js框架zepto.js入门介绍
zepto.js是一个专为mobile WebKit浏览器(如:Safari和Chrome)而开发的一个JavaScript框架. 它标榜自己在其简约的开发理念,能够帮助开发人员简单.快速地完成开发交 ...
react 数据可视化_使用d3创建数据可视化并在2020年做出React
react 数据可视化 Data visualisation and application technologies have evolved greatly over the past decad ...
html文件中包含相关的d3.js文件,D3.js进阶系列之CSV表格文件的读取详解
前言之前在入门系列的教程中,我们常用 d3.json()函数来读取 json 格式的文件.json 格式很强大,但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 ...
three.js和D3.js
D3.js是一个数据可视化的库,看看他们的DEMO就可以知道,技术基础是SVG.兼容性是IE9+. three.js是以webgl为基础的库,封装了一些3D渲染需求中重要的工具方法与渲染循环. web ...
html 实时曲线 js,基于d3.js实现实时刷新的折线图
先来看看效果图下面直接上源代码,html文件实时刷新折线图 .axis path, .axis line{ fill: none; stroke: black; shape-rendering: ...
A better way to learn D3 js - iLearning D3.js
iLearning D3.js Basic is an iPad app to learn and code with D3. In 1.1 version, new tutorial is prov ...
数据可视化的利器-Seaborn简易入门
Seaborn是针对统计绘图的,一般来说,Seaborn能满足数据分析90%的绘图需求.本站整理的Seaborn的41个样例代码,在github进行分享,绝大部分数据可视化的问题可以参考这里的样例代码 ...