D3.js 数据可视化教程-优快云博客

本文链接：https://blog.youkuaiyun.com/webBess/article/details/81557908

学习地址：

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

目录：http://www.ourd3js.com/wordpress/2209/

官方地址：https://github.com/d3/d3/wiki#ordinal

API中文手册：https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C

D3(Data-Driven Documnets),一个被数据驱动的文档，简单来说，就是一个javascript的函数库，使用它主要来做数据可视化的。

在SVG画布的预定义元素里，有六种基本图形：

矩形（rect）；圆形（circle）；椭圆（ellipse）；线段（line）；折线（polyline）；多边形（polygon）。

另外，还有一种比较特殊，也是功能最强的元素：路径（path）。

画布中的所有图形，都是由以上七种元素组成。

D3(Data-Driven Documnets),一个被数据驱动的文档，简单来说，就是一个javascript的函数库，使用它主要来做数据可视化的。

在SVG画布的预定义元素里，有六种基本图形：

矩形（rect）；圆形（circle）；椭圆（ellipse）；线段（line）；折线（polyline）；多边形（polygon）。

另外，还有一种比较特殊，也是功能最强的元素：路径（path）。

画布中的所有图形，都是由以上七种元素组成。

比例尺：

D3中的比例尺，也有定义域和值域，分别被称为domain和range

1.线性比例尺

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

假设有如下数组：

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];

现有要求如下：

将dataset中最小的值，映射成0；将最大的值，映射成300。

代码如下：

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

坐标轴：

坐标轴在SVG中是没有现成的图形元素的，需要用到其它的元素组合构成。D3提供了坐标轴的组件，如此，在SVG中绘制坐标轴变得像添加普通元素一样简单。

SVG没有坐标轴<axis>这种元素，因此，我们需要用其他元素来组合成坐标轴，最终使其变成类似以下的形式

<g>
<!-- 第一个刻度 -->
<g>
<line></line> <!-- 第一个刻度的直线 -->
<text></text> <!-- 第一个刻度的文字 -->
</g>
<!-- 第二个刻度 -->
<g>
<line></line> <!-- 第二个刻度的直线 -->
<text></text> <!-- 第二个刻度的文字 -->
</g> 
...
<!-- 坐标轴的轴线 -->
<path></path>
</g>

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

如果手动添加这些元素就太麻烦了，为此，D3提供了一个组件：d3.svg.axis()。它为我们完成了以上工作。

定义坐标轴：

在比例尺的基础上添加一个坐标轴的组件。

//数据
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);

文字坐标的做法：

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

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

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

        var xTexts = [ "我", "你", "他" ];

        var oridnal = d3.scale.ordinal()
                .domain(xTexts)
                .rangeBands([0, 250]);

        var axis = d3.svg.axis()
                    .scale(oridnal)     //指定比例尺
                    .orient("bottom")   //指定刻度的方向

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

</script>

D3实现图形的过渡

transition()

启动过渡效果。

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

.attr("fill","red")  //初始颜色为红色
.transition()        //启动过渡
.attr("fill","blue") //终止颜色为蓝色

duration()

指定过渡的持续时间，单位为毫秒。

如duration(200)，指持续时间为200ms

ease()

指定过渡的方式，常有的有：

linear：普通的线性变化

circle：慢慢地到达变换地最终状态

elastic：带有弹跳地到达最终状态

bounce：在最终状态处弹跳几次

调用时，格式形如：ease("bouce")。

delay()

指定延迟地时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。

例如，对整体指定时：

.transition()

.duration(1000)

.delay(500)

如此，图形整体在延迟500毫秒后发生变化，变化的时长为1000ms。因此，过渡的总时长为1500ms。

D3.js(一)