资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/D3.js可视化前端框架的使用要点

D3.js可视化前端框架的使用要点

MASAILA / 3411人阅读

摘要：该事件不会区分字母的大小写，例如和被视为一致。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。而有元素与数据对应的部分称为。

1.安装

2.介绍

d3.select()和d3.selectAll();


   
1

   
2

    
3

以上就是D3的选择集。

以上选择了数据，如何绑定数据

提供2个方法：datum()和data().

datum():是指绑定一个数据到选择集上。
data():绑定一个数组到选择集上，并且数组的各项值与选择集的各项绑定。

元素的选择还可以通过id 和class去查找

   
Pear

   
Banana


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

元素的插入

append() insert()

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

删除元素

  var p = body.select("#myid");
  p.remove();
3.画图表的要素 
画图表之前都有一个前置工作要做，就是所有的东西都是画在svg上的。
  var width = 300;  //画布的宽度
  var height = 300;   //画布的高度
   var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度

比例尺（scale）
比例尺分为2种，一种是线性比例尺，一种是序数比例尺

先看线性比例尺代码

  var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
  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

线性比例尺 提供d3.scale.linear() 返回一个线性比例尺。其中domain,设定比例尺的定义域，range设定比例尺的值域。

其中 d3.min(数组名称) d3.max(数组名称) 分别是获得数组的最小值和最大值。

看序数比例尺的代码

 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); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

序数比例尺提供的是ordinal方法。d3.scale.ordinal() ;

那么定义完比例尺了，怎么去应用呢？

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

坐标轴 axis

d3.svg.axis() 定义了一个坐标轴

scale():指定比例尺

orient():指定刻度的朝向

ticks():指定的刻度的数量

   //数据
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);          //指定刻度的数量
     
     
     svg.append("g")
   .call(axis);
4 图表的动画

transition() // 启动动画

duration(2000) //动画的持续时间

ease(bounce) // 动画类型 常用的有linear circle elastic bounce

5.图表的交互 
circle.on("click", function(){
    //在这里添加交互内容
});

一般用on加事件处理程序

鼠标常用的事件有：

click：鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起。
mouseover：光标放在某元素上。
mouseout：光标从某元素上移出来时。
mousemove：鼠标被移动的时候。
mousedown：鼠标按钮被按下。
mouseup：鼠标按钮被松开。
dblclick：鼠标双击。
键盘常用的事件有三个：

keydown：当用户按下任意键时触发，按住不放会重复触发此事件。该事件不会区分字母的大小写，例如“A”和“a”被视为一致。
keypress：当用户按下字符键（大小写字母、数字、加号、等号、回车等）时触发，按住不放会重复触发此事件。该事件区分字母的大小写。
keyup：当用户释放键时触发，不区分字母的大小写。 触屏常用的事件有三个：

touchstart：当触摸点被放在触摸屏上时。
touchmove：当触摸点在触摸屏上移动时。
touchend：当触摸点从触摸屏上拿开时。 当某个事件被监听到时，D3 会把当前的事件存到 d3.event 对象，里面保存了当前事件的各种参数，请大家好好参详。如果需要监听到事件后立刻输出该事件，可以添加一行代码：

6. 图表的布局

布局是帮你完成了数据转换，不是帮你完成了画图

D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。

12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。

具体看官网

7.理解update。enter exit

如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit

GPU云服务器 云服务器 大数据 可视化 d3.js d3.js数据可视化实战 d3.js数据可视化实战手册 js和前端框架的优势

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

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

相关文章

  • 声明式与响应式——前端新一代数据可视化方案

    摘要：数据可视化图表图表作为数据可视化最常见的表现形式之一，往往被以偏概全的认为图表就是数据可视化。严格来说，数据可视化应该是连接数据与视觉的一个映射关系，将数据映射成人更容易感知其规律的可视化结果。 题目中的新一代是个相对的概念，事实上本文即将介绍的方法已经有了生产环境可用的实现方案（这也侧面佐证了其可行性），但考虑到此方法与现在大部分前端项目中所使用的数据可视化方案相比仍有一些优势，因此...

    xuhong 评论0 收藏0

  • 14个最好的 JavaScript 数据可视化库

    摘要：适用于，演示这是开发的一个简单的可视化库，它允许你创建所有常用的图表类型条形图，树形图，折线图，面积图等。可以轻松地对折线图和条形图进行混合和匹配以组合不同的数据集，这是非常棒的功能。 翻译：疯狂的技术宅原文：https://www.monterail.com/blo... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 你的程序有多...

    Mertens 评论0 收藏0

  • javascript功能插件大集合，写前端的亲们记得收藏

    摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。 【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

    cfanr 评论0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

    netmou 评论0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

    Hydrogen 评论0 收藏0

发表评论

登陆后可评论

0条评论

MASAILA

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<