D3.js学习笔记（一）

D3.js学习资源：

http://wiki.jikexueyuan.com/project/d3wiki/introduction.html 极客学院关于D3.js的系列文章；

http://d3.decembercafe.org/

http://www.ourd3js.com/wordpress/

D3 3.x版本API:https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md

D3 4.x版本API：https://github.com/d3/d3/blob/master/API.md

3.x和4.x版本差别很大；

网上个人关于D3的博客：http://www.iampua.com/pui/ant-admin.html#/（示例）

https://www.cnblogs.com/fastmover/p/7779660.html 有例子可供下载

一、基本介绍

D3.js是基于数据驱动的java script数据可视化工具，借助 Html5提供的SVG、Canvas实现数据展示；

D3.js采用类似于JQuery的链式语法，选择和操纵数据都非常的方便，示例如下：

<html> 
  <head> 
        <meta charset="utf-8"> 
        <title>HelloWorld</title> 
  </head> 
    <body> 
        <p>Hello World 1</p>
        <p>Hello World 2</p>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
        <script>  
            var p=d3.select("body").selectAll("p");
            p.text("www.ourd3js.com");  
            p.style("color","red");

          p.style("font-size","72px");    
//=======等价于如下链式语法：=======================================

//d3.select("body").selectAll("p").text("www.ourd3js.com").style("color","red").style("font-size","72px");
</script> 
</body> 
</html>

二、D3.js的元素选择

1、D3.js选择器允许选择元素、元素样式、设置元素属性

1）选择元素

d3.selectAll("p") //按元素名称选择全部元素

d3.select("body")//按元素名称选择指定元素

d3.select(".class")//选择指定的类

d3.select("#id") //按id选择元素

d3.select("body").select("p") //选择body中第一个P元素

三、数据绑定

d3中可以绑定到单个数据对象，也可以绑定到数组对象

实现页面中所有段落绑定到特定的字符串代码如下：

var str = "China";

var body = d3.select("body");
var p = body.selectAll("p");

p.datum(str); //datum 绑定html元素到一个数据对象,注意绑定到内容不代表P的文本显示绑定数据

p.text(function(d, i){
    return "第 "+ i + " 个元素绑定的数据是 " + d;
});  //通过函数设置P内容，内容返回 P的序列号及绑定内容信息

绑定到数组示例代码如下：

var dataset = ["I like dogs","I like cats","I like snakes"]
var body = d3.select("body");
var p = body.selectAll("p");
//===============通过函数data绑定到数组================== 
p.data(dataset)
  .text(function(d, i){
      return d;
  });;

四、元素插入、删除以及样式与属性设置

      var width = 300;	//画布的宽度
      var height = 300;	//画布的高度

      svg = d3.select("body").append("svg")				//添加一个svg元素
              .attr("width", width)		//设定宽度
              .attr("height", height);	//设定高度

      var dataset = [2.5, 2.1, 1.7, 1.3, 0.9,3,5.5];

      svg.selectAll("rect")
            .data(dataset)
            .enter()               //====如果数据没有绑定到元素则创建占位元素，当append时创建实际元素
            .append("rect")
            .attr("x", 200)
            .attr("y", function (d, i) {
                return i * rectHeight;
            })
            .attr("width", function (d) {
                return linear(d);
            })
            .attr("height", rectHeight - 2)
            .attr("fill", "steelblue");  //设置属性，属性与svg对应

五、比例尺

比例尺建立实际数据与图像绘制数据之间的比例关系，d3提供了多种比例尺类型：线性比例尺（将一个连续的区间，映射到另一区间）、序数比例尺（值离散的，线性比例尺不适合，需要用到序数比例尺）

线性比例尺示例：

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);

linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

序数比例尺

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,3,5.5];

 var linear = d3.scale.linear()   //==========线性比例尺============
        .domain([0, d3.max(dataset)])   //==============实际数据================
        .range([0, 350]);  //===============绘图数据（根据实际数据与比例尺范围，自动创建绘图数据）====================

 svg = d3.select("body").append("svg")				//添加一个svg元素
                .attr("width", width)		//设定宽度
                .attr("height", height);	//设定高度

 svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", 200)
            .attr("y", function (d, i) {
                return i * rectHeight;
            })
            .attr("width", function (d) {
                return linear(d);   //返回比例尺中的数据
            })
            .attr("height", rectHeight - 2)
            .attr("fill", "steelblue");

六、坐标轴

在绘制柱状图、曲线图时常常需要绘制坐标轴，在D3中已经将坐标轴实现为组件，柱状图实现示例：

 d3.drawAxis = function ()
    {
        var width = 300;	//画布的宽度
        var height = 300;	//画布的高度

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

        var dataset = [2.5, 2.1, 1.7, 1.3, 0.9,3,5.5];

        //==================定义比例尺=======================
        var linear = d3.scale.linear()
            .domain([0, d3.max(dataset)])
            .range([0, 350]);

        var rectHeight = 25;	//每个矩形所占的像素高度(包括空白)

        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", 200)
            .attr("y", function (d, i) {
                return i * rectHeight;
            })
            .attr("width", function (d) {
                return linear(d);  //=============获取比例尺数据================
            })
            .attr("height", rectHeight - 2)
            .attr("fill", "steelblue");

//===============创建坐标轴组件，设置组件的相关属性========================
        var axis = d3.svg.axis()
            .scale(linear)		//指定比例尺
            .orient("bottom")	//指定刻度的方向
            .ticks(8);			//指定刻度的数量


        //==================call的作用是：在调用函数axis时，将添加的svg 组对象属性
        //svg.append("g").attr("class", "axis").attr("transform", "translate(200,200)")作为axis函数的调用参数=================
        //attr("transform", "translate(200,200)")表示平行移动坐标轴的位置x、y分量；
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(200,180)")
            .call(axis);

    }

绘制完成的图如下示意：

D3.js学习笔记（一）

猜你喜欢