官方网站：http://d3js.org/

github：https://github. com/mbostock/d3/tags

d3图片汇总：https://github.com/mbostock/d3/wiki/Gallery

全面学习网站：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>

6.动态效果

D3 支持制作动态的图表。有时候，图表的变化需要缓慢的发生，以便于让用户看清楚变化的过程，也能给用户不小的友好感。

实现动态的方法

transition()

启动过渡效果。

其前后是图形变化前后的状态（形状、位置、颜色等等），例如：

.attr("fill","red")         //初始颜色为红色

.transition()               //启动过渡

.attr("fill","steelblue")   //终止颜色为铁蓝色

D3 会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB值）进行插值计算，得到过渡用的颜色值。我们无需知道中间是怎么计算的，只需要享受结果即可。

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")... //与第一个圆一样，省略部分代码

//在1.5秒（1500毫秒）内将圆心坐标由100变为300，

//将颜色从绿色变为红色

circle2.transition()

    .duration(1500)

    .attr("cx", 300)

    .style("fill","red");

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

var circle3 = svg.append("circle")... //与第一个圆一样，省略部分代码

//在2秒（2000毫秒）内将圆心坐标由100变为300

//将颜色从绿色变为红色

//将半径从45变成25

//过渡方式采用bounce（在终点处弹跳几次）

circle3.transition()

    .duration(2000)

    .ease("bounce")

    .attr("cx", 300)

    .style("fill","red")

    .attr("r", 25);

全例

<html>

<head>

    <meta charset="utf-8">

    <title>让图表动起来</title>  

</head> 

<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 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);

    var circle2 = svg.append("circle")

                    .attr("cx", 100)

                    .attr("cy", 200)

                    .attr("r", 45)

                    .style("fill","green");

    //在1.5秒（1500毫秒）内将圆心坐标由100变为300，

    //将颜色从绿色变为红色

    circle2.transition()

        .duration(1500)

        .attr("cx", 300)

        .style("fill","red");

    var circle3 = svg.append("circle")

                    .attr("cx", 100)

                    .attr("cy", 300)

                    .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);

</script>

</body>

</html>

给柱形图加上动态效果

<html>

<head>

    <meta charset="utf-8">

    <title>让图表动起来</title>  

<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>

</head> 

<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("width", xScale.rangeBand() - rectPadding )

        .attr("y",function(d){

            var min = yScale.domain()[0];

            return yScale(min);

        })

        .attr("height", function(d){

            return 0;

        })

        .transition()

        .delay(function(d,i){

            return i * 200;

        })

        .duration(2000)

        .ease("bounce")

        .attr("y",function(d){

            return yScale(d);

        })

        .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("dx",function(){

            return (xScale.rangeBand() - rectPadding)/2;

        })

        .attr("dy",function(d){

            return 20;

        })

        .text(function(d){

            return d;

        })

        .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);

        });

    //添加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画图插件的更多相关文章

D3画图学习一
一.D3画图简介 D3 是最流行的可视化库之一,它被很多其他的表格插件所使用.它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中.你可以使用它用一个数组创建基本的HTML表格,或是 ...
给Chrome和Firefox添加js脚本作为插件的方法
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5973141. ...
原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
手写js面向对象选项卡插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
Js与flash交互：在html页面中用js与MyReport插件交互
Html页面与flash的加载如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...
纯js客服插件集qq、旺旺、skype、百度hi、msn
原文纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...
js封装成插件
由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件.感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了 ...
原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...

随机推荐

CSS垂直居中精华总结
1 table-cell方式将center元素的包含框display设置为table,center元素的display设置为table-cell,vertical-align设置为middle. ...
[No000037]操作系统Operating Systems操作系统历史与硬件概况History of OS & Summaries!
培根:读史使人明智操作系统的简史 (1955-1965) 计算机非常昂贵,上古神机IBM7094 ,造价在250万美元以上计算机使用原则:只专注于计算批处理操作系统(Batch system) ...
为什么那么多人想开发一元夺宝类app？
别拿你的无知和愚蠢,来证明主观的判断! 国人对一切事物具有怀疑的本性是好的, 但是若不建立于科学的分析方法, 那就是愚昧! 身边有朋友玩夺宝投入较多,产出较少,于是向我求助.想从数据分析的角度知道到底 ...
oracle的substr函数的用法
oracle的substr函数的用法取得字符串中指定起始位置和长度的字符串 substr( string, start_position, [ length ] ) 如: substr( ...
scrapy系统学习(1)--概要
本文操作环境:ubuntu14.04 一.安装Scrapy/Mysql/MySQLdb 参照官网教程安装Scrapy #sudo apt-key adv --keyserver hkp://keyse ...
windows live Writer test
package com.newegg.shopping.util.listener; import javax.servlet.http.HttpSessionAttributeListener; i ...
(原创)在Exchange 2007 server中使用实时黑名单服务(RBL)过滤垃圾邮件
近一段有同事抱怨公司的邮件系统垃圾邮件非常多,早上上班打开邮箱垃圾邮件竟然有几十封.然后赶紧打开Exchange工具“邮件跟踪”,发现有每隔1到2分钟,邮件系统便会收到来自不同IP的垃圾邮件,由于源I ...
Regular Expression Matching
Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...
sublime配置文件
起初是为了解决 tab转四个空格问题安装包 Sublime_Text_Build_3103_x64_CHS_Lfqy.exe 配置方法配置脚本 { "bold_folder_labels ...
ZooKeeper 笔记(2) 监听数据变化
ZK中的每个节点都可以存储一些轻量级的数据,这些数据的变化会同步到集群中的其它机器.在应用中程序员可以添加watcher来监听这些数据的变化,watcher只会触发一次,所以触发过后想要继续监听,必须 ...

js-d3画图插件