博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【D3.js 学习总结】1、初识D3
阅读量:6007 次
发布时间:2019-06-20

本文共 994 字,大约阅读时间需要 3 分钟。

D3是指数据驱动文档(Data-Driven Documents),根据D3的官方定义:

D3.js是一个JavaScript库,它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准,因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时,它提供了强大的可视化组件,可以让使用者以数据驱动的方式去操作DOM。----D3维基(2013年8月)

从一个Hello Wordld示例来看看d3如何运行

function render(data){    var demo = d3.select('body')        .selectAll('p')        .data(data, function (d) {          return d;        });    demo.enter()        .append('p')        .style('width', 0+'px')        .style('background', '#eee')    demo        .text(function (d) {          return d;        })        .transition()        .duration(1000)        .style('width', function (d) {          return d+'px';        })    demo.exit()        .transition()        .duration(1000)        .style('width', 0+'px')        .remove();  }  render([100,300,500]);  setTimeout(function(){    render([300,500,1000]);  },1000)

通过链式风格的方式让整个运行步骤非常清晰,D3的API设计跟我们平时用的Jquery很像,所以理解起来比较容易。

Hello World示例展示了数据如何驱动页面展示,在render方法里通过数据的变化,它做到了初始化新数据更新已有数据删除无效数据这样一个完整的环节;

转载地址:http://ojvmx.baihongyu.com/

你可能感兴趣的文章
使用eclipse生成html格式注释文档 [ javadoc ]
查看>>
ProtoBuffer 简单例子
查看>>
Winform开发框架中工作流模块的表设计分析
查看>>
sklearn
查看>>
iOS多线程开发系列之(一)NSThread
查看>>
微信小程序初体验(上)- 腾讯ISUX社交用户体验设计成员出品
查看>>
实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端
查看>>
SAP WM Physical Inventory Method ST & PZ
查看>>
jenkins自动发布java代码
查看>>
一道趣味数学算法问题
查看>>
版权协议
查看>>
我的女儿二三事
查看>>
SAP SD Sales Order 中的shipping point 不能为空
查看>>
通用Iframe跨域通信库实现
查看>>
一次快速的数据迁移感悟
查看>>
8.7. dmidecode - DMI table decoder
查看>>
MySQL修改提示符
查看>>
PLSQL的变量
查看>>
HDOJ 2021 发工资咯:)(利用了一种取余的思想)
查看>>
在openSUSE 13.1中配置FTP服务器
查看>>