一、安装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)); 

//序数比例尺 有时候,定义域和值域不一定是连续的。例如,有两个数组:
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都改了。还要摸索一段时间。

暂时就说到这儿吧。

 

D3.js 入门学习(一)的更多相关文章

  1. d3.js入门学习

    个人感觉前端数据可视化是个趋势,并且现在所在公司也是有做这块的项目,虽然我目前还没有接触到公司数据可视化的项目,但是,今后总是要接触的嘛. 今天看了一下公司目前所用的两种数据可视化工具---D3和EC ...

  2. D3.js 入门学习(二) V4的改动

    //d3.scan /* 新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引. 这个方法有点类似于d3.min和d3.max. 而d3.scan可以得到极值的索引而不 ...

  3. D3.js 入门教程

    最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程      http://wiki.jikexueyuan.com/project/d3wiki/author.h ...

  4. d3.js 入门指南

    说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

  5. d3.js 入门指南 - 仪表盘

    D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...

  6. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  7. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  8. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  9. 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld

    下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...

随机推荐

  1. easyui如何动态改变列的编辑属性

    动态改变列的编辑属性 var tt=$('#dg').datagrid('getColumnOption', 'yearContent'); //通过列名获得此列 tt.editor={type:'t ...

  2. 关于z-index的总结

    z-index的作用 很多时候需要把一个元素覆盖到另一个元素之上,比如登入弹出框等,这个时候就需要z-index属性出场了.所以呢,z-index就是调节层的显示优先级,决定哪个显示在最上方.作用范围 ...

  3. 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程03:碰撞检测》

    3.碰撞检测 碰撞检测的概述: 碰撞在物理学中表现为两粒子或物体间极端的相互作用.而在游戏世界中,游戏对象在游戏世界自身并不受物理左右,为了模拟真实世界的效果,需要开发者为其添加属性,以模拟真实事件的 ...

  4. Oracle 11gR2的完全卸载

    首先停止oracle服务,卸载oracle,其次删除oracle文件夹,最后删除oracle服务和清理注册表. 以下是详细教程 1.关闭oracle所有的服务.可以在windows的服务管理器中关闭: ...

  5. 是什么优化让 .NET Core 性能飙升?

    .NET Core(开放源代码,跨平台,x-copy可部署等)有许多令人兴奋的方面,其中最值得称赞的就是其性能了. 感谢所有社区开发人员对.NET Core做出的贡献,其中的许多改进也将在接下来的几个 ...

  6. 专治不会看源码的毛病--spring源码解析AOP篇

    昨天有个大牛说我啰嗦,眼光比较细碎,看不到重点.太他爷爷的有道理了!要说看人品,还是女孩子强一些.原来记得看到一个男孩子的抱怨,说怎么两人刚刚开始在一起,女孩子在心里就已经和他过完了一辈子.哥哥们,不 ...

  7. JQuery和JS操作LocalStorage/SessionStorage的方法

    LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件,数据多的话会 ...

  8. postgresql设置主键

    replace(((uuid_generate_v4())::character varying)::text, '-'::text, ''::text)

  9. PHP 两数组循环组合

  10. 小程序之--canvasToTempFilePath

    最近做的小程序需要图片上传头像的功能,不对上传的图片做处理肯定出来的效果不好:所以就隐藏了一个canvas对上传的图片进行压缩或者进行大小的编辑: 通过chooseImage方法,可以拿到图片的临时路 ...