码迷，mamicode.com
首页 > Web开发 > 详细

js-d3画图插件

时间：2015-12-24 19:16:52      阅读：380      评论：0      收藏：0      [点我收藏+]

标签：

d3.js下载

全面学习网站：http://www.ourd3js.com

网络统一配置

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

 

1. 如何选择元素

在 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元素

 

 

2. 如何绑定数据

D3 有一个很独特的功能：能将数据绑定到 DOM 上，也就是绑定到文档上。这么说可能不好理解，例如网页中有段落元素 <p> 和一个整数 5，于是可以将整数 5 与 <p>绑定到一起。绑定之后，当需要依靠这个数据才操作元素的时候，会很方便。

D3 中是通过以下两个函数来绑定数据的：

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

 

 datum()

假设有一字符串 China，要将此字符串分别与三个段落元素绑定，代码如下：

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

在上面的代码中，用到了一个无名函数 function(d, i)。当选择集需要使用被绑定的数据时，常需要这么使用。其包含两个参数，其中：

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

 

 

data()

有一个数组，接下来要分别将数组的各元素绑定到三个段落元素上。

var dataset = ["I like dogs","I like cats","I like snakes"];

绑定之后，其对应关系的要求为：

Apple 与 I like dogs 绑定
Pear 与 I like cats 绑定
Banana 与 I like snakes 绑定

调用 data() 绑定数据，并替换三个段落元素的字符串为被绑定的字符串，代码如下：

var body = d3.select("body");
var p = body.selectAll("p");
 
p.data(dataset)
  .text(function(d, i){
      return d;
  });

这段代码也用到了一个无名函数 function(d, i)，其对应的情况如下

当 i == 0 时， d 为 I like dogs。
当 i == 1 时， d 为 I like cats。
当 i == 2 时， d 为 I like snakes。

此时，三个段落元素与数组 dataset 的三个字符串是一一对应的，因此，在函数 function(d, i) 直接 return d 即可。

结果自然是三个段落的文字分别变成了数组的三个字符串。

I like dogs
I like cats
I like snakes

 

 

选择第一个 p 元素

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

 

var p1 = body.select("p");
p1.style("color","red");

 

结果如下图，被选择的元素标记为红色。

技术分享

 

选择全部 p 元素

var p = body.selectAll("p");
p.style("color","red");

技术分享

 

选择第二个 p 元素

<p id="myid">Pear</p>

然后，使用 select 选择元素，注意参数中 id 名称前要加 # 号。

var p2 = body.select("#myid");
p2.style("color","red");

 

技术分享

选择后两个 p 元素

<p class="myclass">Pear</p>
<p class="myclass">Banana</p>

由于需要选择多个元素，要用 selectAll。注意参数，class 名称前要加一个点。

var p = body.selectAll(".myclass");
p.style("color","red");

技术分享

关于 select 和 selectAll 的参数，其实是符合 CSS 选择器的条件的，即用“井号（#）”表示 id，用“点（.）”表示 class。

此外，对于已经绑定了数据的选择集，还有一种选择元素的方法，那就是灵活运用 function(d, i)。我们已经知道参数 i 是代表索引号的，于是便可以用条件判定语句来指定执行的元素。

 

3. 插入元素

append()：在选择集末尾插入元素
insert()：在选择集前面插入元素

假设有三个段落元素，与上文相同。

append()

body.append("p")
    .text("append p element");

 

在 body 的末尾添加一个 p 元素，结果为：

Apple
Pear
Banana
append p element

 

 

insert()

在 body 中 id 为 myid 的元素前添加一个段落元素。

body.insert("p","#myid")
  .text("insert p element");

已经指定了 Pear 段落的 id 为 myid，因此结果如下。

Apple
insert p element
Pear
Banana

 

 

 

 

4. 删除元素

删除一个元素时，对于选择的元素，使用 remove 。

var p = body.select("#myid");
p.remove();

 

 

 

图标制作

一，柱形图

技术分享

D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。

使用 D3 在 body 元素中添加 svg 的代码如下。

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

有了画布，接下来就可以在画布上作图了。

本例绘制一个横向的柱形图。只绘制矩形，不绘制文字和坐标轴。

在 SVG 中，矩形的元素标签是 rect。例如：(svg和rect元素为d3自动添加，不需要在页面标出)

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

面的 rect 里没有矩形的属性。矩形的属性，常用的有四个：

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

要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

现在给出一组数据，要对此进行可视化。数据如下：

var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）

为简单起见，我们直接用数值的大小来表示矩形的像素宽度（后面会说到这不是一种好方法）。然后，添加以下代码。

var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
 
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

这段代码添加了与 dataset 数组的长度相同数量的矩形，所使用的语句是：

svg.selectAll("rect")   //选择svg内所有的矩形
    .data(dataset)  //绑定数组
    .enter()        //指定选择集的enter部分
    .append("rect") //添加足够数量的矩形元素

这段代码以后会常常出现在 D3 的代码中，请务必牢记。

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

添加了元素之后，就需要分别给各元素的属性赋值。在这里用到了 function(d, i)，前面已经讲过，d 代表与当前元素绑定的数据，i 代表索引号。给属性赋值的时候，是需要用到被绑定的数据，以及索引号的。

最后一行的：

.attr("fill","steelblue");

 

是给矩形元素设置颜色。一般来说，最好写成外置 CSS 的形式，方便归类和修改。这里为了便于初学者理解，将样式直接写到元素里。

 

比例尺的使用

1. 线性比例尺

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

var min = d3.min(dataset);
var max = d3.max(dataset);
 
var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);//映色范围:映射成 0；将最大的值，映射成 300。
 
linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

 

其中，d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域。在这里还用到了两个函数，它们经常与比例尺一起出现：

d3.max()
d3.min()

 

这两个函数能够求数组的最大值和最小值，是 D3 提供的。按照以上代码，

比例尺的定义域 domain 为：[0.9, 3.3]

比例尺的值域 range 为：[0, 300]

因此，当输入 0.9 时，返回 0；当输入 3.3 时，返回 300。当输入 2.3 时呢？返回 175，这是按照线性函数的规则计算的。

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

 

 

 

2. 序数比例尺

有时候，定义域和值域不一定是连续的。例如，有两个数组：

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

希望 0 对应颜色 red，1 对应 blue，依次类推。

但是，这些值都是离散的，线性比例尺不适合，需要用到序数比例尺。

var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);
 
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

用法与线性比例尺是类似的

 

 

给柱形图添加比例尺

对上面柱形图做如下修改修改：

 <head> 
        <meta charset="utf-8"> 
        <title>HelloWorld</title> 
  </head> 
    <body> 
    </body> 
</html>
<script src="d3.js" charset="utf-8"></script> 
<script>  
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];  //数据（表示矩形的宽度）
var width = 300;  //画布的宽度
var height = 300;   //画布的高度
 
var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度

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

var rectHeight = 25;    //每个矩形所占的像素高度(包括空白)
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return linear(d);   //在这里用比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");
</script>

 

 

5.坐标轴

d3.svg.axis()

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

生成坐标轴，需要用到比例尺，它们二者经常是一起使用的。下面，在上一章的数据和比例尺的基础上，添加一个坐标轴的组件。

//数据
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 axis = d3.svg.axis()
     .scale(linear)      //指定比例尺
     .orient("bottom")   //指定刻度的方向
     .ticks(7);          //指定刻度的数量

第 1 – 2 行：定义数组。

第 4 – 7 行：定义比例尺，其中使用了数组 dataset。

第 9 – 12 行：定义坐标轴，其中使用了线性比例尺 linear。其中：

d3.svg.axis()：D3 中坐标轴的组件，能够在 SVG 中生成组成坐标轴的元素。
scale()：指定比例尺。
orient()：指定刻度的朝向，bottom 表示在坐标轴的下方显示。
ticks()：指定刻度的数量。

 

 

在 SVG 中添加坐标轴

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

svg.append("g")
   .call(axis);

上面有一个 call() 函数，其参数是前面定义的坐标轴 axis。

在 D3 中，call() 的参数是一个函数。调用之后，将当前的选择集作为参数传递给此函数。也就是说，以下两段代码是相等的。

function foo(selection) {
  selection
      .attr("name1", "value1")
      .attr("name2", "value2");
}
foo(d3.selectAll("div"))

和

d3.selectAll("div").call(foo);

因此，

svg.append("g").call(axis);

与

axis(svg.append(g));

是相等的。

 

设定坐标轴的样式和位置

默认的坐标轴样式不太美观，下面提供一个常见的样式：

<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>

分别定义了类 axis 下的 path、line、text 元素的样式。接下来，只需要将坐标轴的类设定为 axis 即可。

坐标轴的位置，可以通过 transform 属性来设定。

通常在添加元素的时候就一并设定，写成如下形式：

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(20,130)")
  .call(axis);

 

全列：

 <head> 
        <meta charset="utf-8"> 
        <title>HelloWorld</title> 
<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>
  </head> 
    <body> 
    </body> 
</html>
<script src="d3.js" charset="utf-8"></script> 
<script>  
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];  //数据（表示矩形的宽度）
var width = 300;  //画布的宽度
var height = 300;   //画布的高度
 
var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度

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

var axis = d3.svg.axis()
     .scale(linear)      //指定比例尺
     .orient("bottom")   //指定刻度的方向
     .ticks(7);          //指定刻度的数量

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(20,130)")
   .call(axis);

var rectHeight = 25;    //每个矩形所占的像素高度(包括空白)
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return linear(d);   //在这里用比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");
</script>

 

 

 

 

 

一个完整的矩形图

<html>  
<head>  
    <meta charset="utf-8">  
    <title>完整的柱形图</title>  
</head> 

<style>
    .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;
    }
</style>

<body>  
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
    <script>

    //画布大小
    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){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        });

    //添加文字元素
    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){
            return yScale(d);
        })
        .attr("dx",function(){
            return (xScale.rangeBand() - rectPadding)/2;
        })
        .attr("dy",function(d){
            return 20;
        })
        .text(function(d){
            return d;
        });

    //添加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);

</script>  
</body>  
</html>

 

js-d3画图插件

标签：

原文地址：http://www.cnblogs.com/hwaggLee/p/5073885.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！