D3.js 入门学习(一)

一、安装D3.js

1.网络连接

<script src="https://d3js.org/d3.v4.min.js"></script>

2.命令行安装

cnpm || npm install d3 --save => 我采用的是cnpm install d3 --save

3.创建node 服务器

a. cnpm || npm install express --save =>前面教程已经说了express 搭建服务器了。后面的教程的都是采用 node 搭建本地服务器。

b. 安装watch文件资源改变的时候自动启动node cnpm install -g supervisor

以前启动服务的时候是 node server.js 以后就是 supervisor server.js

//server.js

var express = require('express');
var app = express();
var d3 = require('d3');

app.get('/demo1.js',function(req,res){
    res.sendFile(__dirname + '/' + 'demo1.js');
})

app.get('/',function(req,res){
    res.sendFile(__dirname + '/' + 'demo.html');
})
app.get('/demo.html',function(req,res){
    res.sendFile(__dirname + '/' + 'demo.html');
})
app.get('/d3.js',function(req,res){
    res.sendFile(__dirname + '/' + 'node_modules/d3/build/d3.js');
})
var server = app.listen('3000',function(){

    console.log('server start 127.0.0.1');
})

c.demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Demo1</title>
    <script src="d3.js"></script>
</head>
<body>

</body>
<script src="demo1.js"></script>
</html>

准备工作完毕，还是写Hello World！

二、hello world

var body = d3.select('body');   //选择body元素
body.append('h1')    //向 body元素中插入 h1标签
  .text('Hello world')    // 给h1标签填充文字为hello world
  .style('color','red');   //修改样式 字体颜色 为红色
/*
 这里涉及一个概念：选择集
 使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。
 另外，有人会发现，D3 能够连续不断地调用函数，形如：
 d3.select().selectAll().text()
 这称为链式语法，和 JQuery 的语法很像，常用 JQuery 的朋友一定会感到很亲切。
 因为封装每个方法的时候都会返回当前对象 return  this;

 */

三、元素的操作

1. 选择元素和元素的绑定

/*
    在D3中如何选择元素
 d3.select()：是选择所有指定元素的第一个
 d3.selectAll()：是选择指定元素的全部

 d3.select('p')  选择页面中第一个P标签
 d3.selectAll('p');   //选择页面中的所有P标签

 */

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

// datum
var data = 'hello world';
var p = d3.selectAll('p');
p.datum(data).text(function (d,i) {
    return '第' + i + '个P标签的数据是' + d;
})

//data 绑定一个数组
var dataArr = [1,2,3,4];
p.data(dataArr).text(function(d,i){
    return '第' + i + '个P标签的数据是' + d;
});

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Demo1</title>
    <script src="d3.js"></script>
</head>
<body>
    <p></p>
    <p></p>
    <p></p>
</body>
<script src="demo1.js"></script>
</html>

2.选择、插入和删除元素

//选择器的方法  <h1 id='app' class='demo'></h1>
var h1 = d3.select('h1');// select('#app'),select("h1");
var h1 = d3.selectAll('h1'); // => 跟上面的方法一样，跟jQuery 的元素选择器一样

// 插入元素

var body = d3.select('body');
body.append('h2').text('我是插在body 末尾的元素');


body.insert('h2','#app').text('我是插在id为APP的元素前面的 h2标签')
//跟jQuery中的方法一样

//删除元素
var app = d3.select('#app');
app.remove(); //删除 id为app的元素

三、柱状图

var w = 400,h = 400;
var body = d3.select('body');   //选择 body元素
var data = [50,100,200,150];
var svg = body.append('svg');  //在body中插入svg 元素  画布
/*
 SVG 是什么
 SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。
 SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，
 可将 SVG 文本直接嵌入 HTML 中显示。
 SVG 有如下特点：
 SVG 绘制的是矢量图，因此对图像进行放大不会失真。
 基于 XML，可以为每个元素添加 JavaScript 事件处理器。
 每个图形均视为对象，更改对象的属性，图形也会改变。
 不适合游戏应用。
 要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

 Canvas 是什么
 Canvas 是通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。
 Canvas 有如下特点：
 绘制的是位图，图像放大后会失真。
 不支持事件处理器。
 能够以 .png 或 .jpg 格式保存图像
 适合游戏应用
 */
svg.selectAll('rect')  //选择svg 中的rect(svg 中提供的矩形标签) 元素
  .data(data)   //绑定数据
  .enter()     // 当 data.length > rect 的元素个时候用enter()。 update,exit()以后再说
  .append('rect')  //补充data.length - rect.length 剩余的rect元素
  .attr('x',20)      //上面说了SVG画布的坐标问题 x就是横向坐标的距离
  .attr('y',function(d,i){  //Y 也一样 都是相对 (0,0)点
      return 25 * i;
  })
  .attr('width',function(d,i){  // 设置矩形的宽度
      return d;
  })
  .attr('height',function(d,i){   //设置柱子的高度
      return 20;
  })
  .attr('fill','green');  //给柱子填充颜色
// 其实跟canvas 中的fillrect 绘制矩形一样

四、比例尺

//比例尺
/*
 在数学中，x 的范围被称为定义域，y 的范围被称为值域。
 D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。
 开发者需要指定 domain 和 range 的范围，如此即可得到一个计算关系。
 */
//线型比例尺
/*
线性比例尺，能将一个连续的区间，映射到另一区间。要解决柱形图宽度的问题，就需要线性比例尺。

 */
var dataset = [0.3,0.9,1,2,2.5]; //要把这个区间映射到0-300的范围

var max = d3.max(dataset);

var linear = d3.scaleLinear()
  .domain([0,max])
  .range([0,300]);
/*
v3: d3.scale.linear() (v3第三版) 返回一个线性比例尺。domain() 和 range()
 分别设定比例尺的定义域和值域。在这里还用到了两个函数，它们经常与比例尺一起出现：
 d3.max()
 d3.min()

   v4: 最新版  scaleLinear();
 */
console.log(linear(1)); // 120

//序数比例尺 有时候，定义域和值域不一定是连续的。例如，有两个数组：
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
var ordinal = d3.scaleOrdinal()
  .domain(index)
  .range(color);

console.log(ordinal(1)) // blue 这样两个数组就有对应关系
/*
    v3: d3.scale.ordinal()
    .domain()
    .range();
    v4: d3.scaleOrdinal()
    .domain()
    .range()

 */
//用比列尺转换为柱状图  就以上面那个线型比例尺为列  画布用上一点的画布 svg

svg.selectAll('rect')
  .data(dataset)
  .enter()
  .append('rect')
  .attr('x',20)
  .attr('y',function(d,i){
      return i * 25;
  })
  .attr('width',function(d,i){
      return linear(d);
  })
  .attr('height',function(d,i){
      return 20;
  })
  .attr('fill','blue');

五、创建带坐标轴的柱形图

//创建已经带坐标轴的柱形图

var w = 600,h = 400;
var body = d3.select('body');   //选择 body元素
var svg = body.append('svg').attr('width',w).attr('height',h);  //在body中插入svg 元素  画布

var dataset = [0.3,0.9,1,2,2.5]; //要把这个区间映射到0-300的范围
var max = d3.max(dataset);
var linear = d3.scaleLinear()
  .domain([0,max])
  .range([0,300]);

//用比列尺转换为柱状图  就以上面那个线型比例尺为列  画布用上一点的画布 svg

svg.selectAll('rect')
  .data(dataset)
  .enter()
  .append('rect')
  .attr('x',20)
  .attr('y',function(d,i){
      return i * 25;
  })
  .attr('width',function(d,i){
      return linear(d);
  })
  .attr('height',function(d,i){
      return 20;
  })
  .attr('fill','blue');

//添加坐标轴
var axis = d3.axisBottom()    //v4: axisBottom 表示向下的比例尺  v3: d3.svg.axis().scale(linear).orient('bottom').ticks(5)   v4  和v3差别真大
  .scale(linear)        //指定比例尺
  .ticks(5);   //指定刻度数量
svg.append('g')   // svg 提供的标签，不知道的可以去熟悉下svg
  .attr('transform',function(d,i){
      return 'translate('+ 20 +','+ 25*5 +')';  //把坐标轴移到对应的位置
  })
  .call(axis);

六、一个完整的柱状图（矩形，坐标轴，对前面几条的一个综合应用）

var w = 500,h=500;
var body = d3.select('body'); //选择body元素
//创建SVG 画布并把大小设置为 500*500
var svg = body.append('svg').attr('width',w).attr('height',h);

//定义一个数组
var dataset = [10, 20, 30, 40, 33, 24, 12, 5];

//y轴 的比例尺 range[0-400]

var linearY = d3.scaleLinear().domain([0,d3.max(dataset)]).range([400,0]);

//X轴的比例尺 [0,400] [0,8];
var linearX = d3.scaleLinear().domain([0,8]).range([0,400]);
var axisY = d3.axisLeft().scale(linearY).ticks(8);
var axisX = d3.axisBottom().scale(linearX).ticks(8);
svg.append('g')
  .attr('transform','translate(30,80)')     //Y轴 的坐标
  .call(axisY);
svg.append('g')
  .attr('transform','translate(30,480)')  //X坐标
  .call(axisX);
svg.selectAll('rect')
  .data(dataset)
    .enter()
    .append('rect')
  .attr('x',function(d,i){
      return linearX(i) + 70;
  })
  .attr('y',function(d,i){
      return linearY(d)+ 80;
  })
  .attr('height',function(d,i){
      return 400 - linearY(d);
  })
  .attr('width',20)
  .attr('fill',function(d,i){
      return d3.color("hsl("+i * 17+", 80%, 50%)")
  });

七、第一部分完了

主要是了解下怎么绑定数据，怎么选择元素。以前看的时候v3版本的。后来用NPM下来的包是V4发现很多API都改了。还要摸索一段时间。

暂时就说到这儿吧。