D3入门

最新推荐文章于 2025-03-10 13:44:58 发布

Wang_0_

最新推荐文章于 2025-03-10 13:44:58 发布

阅读量2.4k

点赞数 1

分类专栏： D3

本文链接：https://blog.youkuaiyun.com/Wang_0_/article/details/79058732

版权

D3 专栏收录该内容

1 篇文章

订阅专栏

D3.js

适用情况
- 1. 选择 D3：如果希望开发脑海中任意想象到的图表。
  2. 选择 Highcharts、Echarts 等：如果希望开发几种固定种类的、十分大众化的图表。
一.引入方式
- (1)下载安装包D3.zip
- (2)引用网址（有网的情况下使用）
```
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
```
二.操作方式
- 链式操作（与jQuery类似）
三.概念
- 选择集
  - 使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集

四.D3的操作

1.文字输出

<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>
d3.select('body').selectAll('p').text('www.decembercafe.org');
//选择<body>中所有的<p>，其文本内容为 practise，选择集保存在变量 p 中
var p=d3.select('body')
        .selectAll('p')
        .text('practise');
//修改段落颜色和字体大小
p.style("color","red")
        .style("font-size","72px")
</script>
</body>

2.元素操作

（1）选择元素

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）绑定元素

datum（）；绑定到一个数据选择集上
data（）; 绑定到选择集上，数组的个响指分别于选择集的各元素绑定–》常用

        <!--利用datum（）绑定数据-->
<script>
var str='China';
var body=d3.select("body");
var p=body.selectAll('p');
p.datum(str);
//无名函数  选择集需要使用绑定数据时经常使用
/*无名函数 function（d,i）包含两个参数  -参数一：代表数据，也就是与某元素绑定的数据
                                         参数二：代表索引，代表数据的索引号，从0开始
*                  */
p.text(function (d, i) {
    return "第" +i+
            "个绑定的数据是"+d
})
/*输出结果：
 第0个绑定的数据是China

 第1个绑定的数据是China

 第2个绑定的数据是China*/
</script>
<!--利用data（）绑定数据-->
<script>
var dataset=["I like apple","I like banana","I like orange"]
var body=d3.select('body');
var p=body.selectAll('p');
p.data(dataset)
        .text(function(d,i){
            return d;
        });
// 这里也使用了无名函数 当i=0 时，d 为I like apple
/*输出结果：
 I like apple
 I like banana
 I like orange
* */
</script>

（3）选择、插入、删除元素

选择元素 ID、类

         <!--选择第二个元素  选择指定元素用ID-->
<script>
var p2=d3.selectAll('body').select('#myid');
p2.style("color","green")
</script>
<!--类 选择多个元素  用类-->
<script>
var p = d3.selectAll('body').selectAll(".myclass");
p.style("color","yellow");
</script>

插入元素
- append（）在选择集末尾插入元素
- insert（）在选择集前面插入元素

删除元素

remove（）删除元素

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

五.D3的使用

1.比例尺（Scale）

（1）定义：将某一区域的值映射到另一区域，其大小关系不变
（2）作用：解决数值过大或者过小无法绘制的局限性
（3）参数
- 定义域：domain
- 值域：range

（4）分类

a.线性比例尺

定义：能将一个连续的区间，映射到另一区间。–》可以用来解决柱形图宽度的问题

 假设有一下数组：
 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)
        linear(0.9);    //返回 0
        linear(2.3);    //返回 175
        linear(3.3);    //返回 300
//d3.scale.linear()返回值可以当做函数来使用，所以才有linear（0.9）的用法

b.序数比例尺

针对离散型数据来使用

 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);
ordinal(1);
ordinal(4)
console.log([ordinal(0),ordinal(1),ordinal(4)]);

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

六。动态操作

transition

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

duration

     指定过渡的持续时间，单位为毫秒。
如 duration(2000) ，指持续 2000 毫秒，即  2 秒。

ease()指定过渡方式
- linear：普通的线性变化
- circle：慢慢达到变换的最终状态
- elastic：带有弹跳的达到最终状态
- bounce：在最终状态处弹跳几次
  调用时，格式形如： ease(“bounce”)

ease()指定过渡方式

 例如，对整体指定时：
.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 毫秒。

七.三大重要概念
- Update：有DOM结构与之对应
  - 处理方法：更新属性值
- Enter：没有DOM结构与之对应
  - 处理方法：添加元素之后，赋予属性值
- Exit：DOM结构足够多，要匹配的元素不够
  - 处理方法：删掉元素
八。动态
- 交互
  - 概念
    - 指的是用户输入了某种指令，程序接收到指令后必须做出某种响应
    - 与图标的交互指的是在图形元素上设置一个或多个监听器，当事件发生时，做出相应的反应
  - 交互方式
    - 鼠标
      click
      mouseover
      mouseout
      mousemove
      mouseup
      ***没有dbclick事件，要实现的话用click+延迟判定来模拟
    - 键盘
      keydown - 当用户按下任意键时触发，按住不放会重复触发此事件。该事件不会区分字母的大小写，例如“A”和“a”被视为一致。
      keypress - 当用户按下字符键（大小写字母、数字、加号、等号、回车等）时触发，按住不放会重复触发此事件。该事件区分字母的大小写。
      keyup - 当用户释放键时触发，不区分字母的大小写。
    - 触屏
      touchstart - 当触摸点被放在触摸屏上时。
      touchmove - 当触摸点在触摸屏上移动时。
      touchend - 当触摸点从触摸屏上拿开时。
  - 添加交互
```
           var circle = svg.append("circle");
circle.on("click", function(){
//在这里添加交互内容
});
```

Alt text
- 布局

饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。 12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。

- 布局的作用
   - 获取绘图所需要的数据

      var dataset=[10,30,20,10,40]
     //定义一个布局
     var pie=d3.layout.pie()
     //返回值赋值给变量pie，此时pie可以当做函数来使用
     var piedata=pie(dataset)
     //5 个整数被转换成了 5 个对象（Object） ，每个对象都有变量起始角度（startAngle）和终止角度（endAngle），还有原数据（属性名称为 data）。这些都是绘图需要的数据。

- 生成器
   - 弧生成器d3.layout.pie();

   ```
          var pie=d3.layout.pie();
    var piedata=pie(dataset)
    console.log(piedata);
    //，5 个整数被转换成了 5 个对象（Object） ，每个对象都有变量起始角度（startAngle）和终止角度（endAngle），还有原数据（属性名称为 data）。这些都是绘图需要的数据。
    var  outerRadius=150//外半径
    var innerRadius=0;//内半径，为0则中间没有空白
    var arc=d3.svg.arc()  //弧生成器
            .innerRadius(innerRadius)  //设置内半径
            .outerRadius(outerRadius);//设置外半径
   ```
   - 力导向图  d3.layout.force()。
   >- 参数
   index - 节点的索引号
 px, py - 节点上一个时刻的坐标
 x, y - 节点的当前坐标
 weight - 节点的权重
   - 地图 d3.geo.path()。