tofacebook.com -专业IT技术社区(贪吃蛇学院) 怎么学习d3.js Web程序 - 贪吃蛇学院-专业IT技术平台
139°

怎么学习d3.js Web程序

标签:end   框架   标题   app   svg   方式   attr   组件   div   

vue是一个数据驱动视图的前端框架,一切皆可作为可重用的组件加以使用

d3则是数据可视化javascript库

 

D3.js基础

1.学习D3.js的语法

语法是必需的,建议自行去官网上学习其语法,如果可以的话最好了解一下函数式编程的curry与compose思想,不建议一开始就去接触高大上的众多在线Demo。

2.学习D3.js的编程思路

 (1)语法其实可以体现其编程思路,起步当然是学习其强大的选择器:

    d3.select(‘body‘).style(‘background-color‘, ‘black‘) 

// 直接选择 ->并设置属性

 d3.selectAll(‘p‘).style(‘color‘, function() { 

// 选择 -> 动态设置属性

return ‘hsl(‘ + Math.random() * 360 + ‘, 100%, 50%)‘

})

d3.selectAll(‘p‘).data([4,8,15,16,23,42]).style(‘font-size‘, function(d) {

// 选择 -> 绑定数据 -> 动态设置属性

return d + ‘px‘

})

(2) 接着是理解Update, Enter和Exit的思路

// Update…
var p = d3.select("body") // 直接把数据绑定到Dom并输出,数组元素个数与p节点的个数一致就全部更新文本,如果不一致,就只更新现有p节点的文本,多余的数据会被保存起来,看下面会用到
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });

// Enter…[常用]
p.enter().append("p") // 如果不一致,数组元素个数比p节点多,就插入p节点补足并相应更新文本
.text(function(d) { return d; });

// Exit…[常用]
p.exit().remove(); // 如果不一致,数组元素个数比p节点少,就删除多余的p节点

(3)然后要学习D3的画图一般思路,比如要画一个线状图,那么我们:

把输入的原始数据转化成为标准的D3可接受的数据格式 -> 根据原始数据定义好x轴函数、y轴函数和定义好作图方式(如d3.line) -> 在SVG上面画出x轴y轴、根据原始数据结合x轴及y轴函数作线状图 -> 再画出标题等细节的东西

(4)最后,给已经完成的图形添加动画效果

没有动画效果的图形看上去会比较乏味。动画基本写法如下:

// 把所有圆圈改变半径
d3.selectAll("circle").transition() // 定义动画
    .duration(750) // 动画持续时间
    .delay(function(d, i) { return i * 10; }) // 元素动画要延时多少时间开始
    .attr("r", function(d) { return Math.sqrt(d * scale); }); // 设置最后效果

怎么学习d3.js

标签:end   框架   标题   app   svg   方式   attr   组件   div   

原文地址:https://www.cnblogs.com/buerBlog/p/8548503.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: