D3.js入门

shixinzhang 发布于2019-08-20 16:18 / 2603人阅读

摘要：通过函数可以选择出没有关联任何数据的图形，可以调用相关函数更新或是删除。

D3.js入门

1.什么是D3.js？

Data-Driver-Document（数据驱动文档）：是一个用来使用Web标准做数据可视化的js库；

数据可视化：用交互的/可视化的方式对抽象数据进行展示，已达到数据认知的目的，数据是纯粹的的事实，纯粹意味着这种事实没有经过任何处理，而信息是数据处理后的结果，他揭示了数据的意义；

优势：比Processing这样的底层绘图简单，比Echarts这样的高度封装的图表更自由，也就是说d3.js为我们提供了一个不是特别底层，也不是高度封装的库，能够给使用者很好地发挥空间，同时学习成本也没有那么大。

2.D3的数据与图形

理解enter-updte-exit（进入-更新-退出）模式

enter(进入)

A:代表数据集合，就是需要可视化的数据；
B:代表图形元素的集合，就是展示出的图形；

如上图所示，集合A中的阴影区部分表示了未被可视化的数据，enter操作的意义在于通过enter()函数返回一个集合，
这个集合里面包含的就是没有被可是可视化的数据；这也就是我们数据化的第一部分
操作，找到那些没有被可视化的数据；

update（更新）

如上图所示，阴影区域表示图像和数据集合的交集，也就是当前数据所对应的图形，通过data函数，可以选择出交集集合，然后对选择出的集合进行操作，对元素进行更新；

exit(退出)

图中的阴影表示没有关联任何数据的图形，为什么会有没有数据的图形，一般而言是从
数据中删除了数据产生的。通过exit函数可以选择出没有关联任何数据的图形，可以调
用相关函数更新或是删除。

3.实例

柱状图

var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8]; 
    //定义数据，定义集合A

  function render(data) { //render函数来更新图表
      // Enter
      d3.select("body").selectAll("div.h-bar") 
           //选中body,选中类名为h-bar的div，其实此时页面上没有这些元素，选择出图形元素的集合
          .data(data) // data函数将数组绑定到将要创建的图形元素上
          .enter() // enter函数选择没有被可视化的数据元素，render第一次调用的时候，没有数据被可视化，所以选中的是所有的数据
              .append("div") // 为每一个数据创建一个div，这里d3为响应的div添加了__data__属性，这个属性的值为绑定的数据值；
                  .attr("class", "h-bar")//类名设置为h-bar
              .append("span"); //每个div中添加一个span

      // Update
      d3.select("body").selectAll("div.h-bar")
          .data(data)  //定义图形集合和数据集合,更新模式下，data()函数返回数据集合和图形集合的交集
              .style("width", function (d) { // 在和数据关联的图形更改属性，所有的d3修饰函数都可以使用这样的函数来修改图形元素的属性，这个函数有一个形参，d代表与对应图形元素关联的数据值
                  return (d * 3) + "px";
              })
              .select("span") // 子元素能拿到父级元素的值
                  .text(function (d) {
                      return d;
                  });
              
      // Exit
      d3.select("body").selectAll("div.h-bar")
          .data(data)
          .exit() //得到没有任何数据关联的图形元素
              .remove();//移除这些元素        
  }

  setInterval(function () { 
      data.shift();
      data.push(Math.round(Math.random() * 100));
      render(data);
  }, 1500);

  render(data);

参考文献：《D3.js数据可视化实战手册》

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82849.html

d3.js入门——selection与创建条形图

摘要：入门，根据官网部分教程学习，发现因为版本更新，有些和概念可能不适用，但总体思想未变。入门d3.js，根据官网部分教程学习，发现因为版本更新，有些api和概念可能不适用，但总体思想未变。本文思路跟随此篇blogLet’s Make a Bar Chart学习，加上自己的理解，并且查阅了部分更新资料元素选择 d3通过d3.select()或者d3.selectAll()获取元素，这两个...

yanbingyun1990 2019-08-23 16:18 评论0 收藏0
d3入门篇（一）：基础知识

摘要：安装就是一个的库，不需要安装，可下载文件或直接引用网络链接。示例选择集，与原生中的用法类似，返回匹配的第一项，返回匹配的所有项。安装 d3.js就是一个js的库，不需要安装，可下载文件或直接引用网络链接。示例 first psecond pthird p 选择集 select()，selectAll() 与原生js中的querySelector querySelectorAll...

xuweijian 2019-08-23 13:59 评论0 收藏0
前端综合性文档和教程总结（持续更新）

摘要：小弟在前端摸爬滚打一段时间，发现前端的比较好的文档比较分散，特别是中文的，我平时都是收藏在浏览器里，以后有好的教程和综合性的文档我会更新到这里。小组中文文档，很全。小弟在前端摸爬滚打一段时间，发现前端的比较好的文档比较分散，特别是中文的，我平时都是ctrl+D收藏在浏览器里，以后有好的教程和综合性的文档我会更新到这里。一则可以做个记录，防止丢失。二则有需要的朋友可以来我这里找一找。 ...

piglei 2019-08-20 10:19 评论0 收藏0
d3.js 使用坐标轴

摘要：本片记录坐标轴入门，使用版本如何实现坐标轴生成的坐标图是通过的路径元素元素组成的，如下图表示的是底部坐标轴不包括内部刻度，如下这部分通过描绘，在中称为容器则包括了和作为即线，即文字实现坐标轴主要步骤步骤主要如下创建比例尺创建坐标轴，是个函数本片blog记录d3坐标轴入门，使用版本v5.9.2 SVG如何实现坐标轴 d3生成的坐标图是通过svg的path(路径)元素 + g + lin...

Karuru 2019-08-23 16:43 评论0 收藏0
d3.js 动态图表

摘要：使用创建动态图表主要使用到了部分的，通过他们可以完成动画我的学习记录是通过一个例子了解这些会动的柱状图还是拿之前的例子，代码在此完整的柱图修改的代码部分在于创建处原来的代码加上动画效果后代码如下动画开始前状态返回持续时间，是的动画函数， d3js v5.9.2 使用d3创建动态图表主要使用到了d3.trasition部分的API，通过他们可以完成动画我的学习记录是通过一个例子了解...

Cc_2011 2019-08-23 16:45 评论0 收藏0