内容简介:d3按照官方文档上说,d3 是一套数据可视化工具,用来帮我们建立数据驱动的 DOM 模型。(当然也包括图表),但是和 DataV、Echarts 之类图表不同的是: d3 并不是开箱即用的,使用 d3 需要对诸如 html、svg、canvas技术有足够的了解,同时也给我们开发提供了更多的灵活性。这里的条形图可以看到 d3 是如何做可视化的。
d3
可能
是前端可视化领域最有名的 工具 了,这篇文章会简单介绍下 d3 这个工具。
d3是什么
按照官方文档上说,d3 是一套数据可视化工具,用来帮我们建立数据驱动的 DOM 模型。(当然也包括图表),但是和 DataV、Echarts 之类图表不同的是: d3 并不是开箱即用的,使用 d3 需要对诸如 html、svg、canvas技术有足够的了解,同时也给我们开发提供了更多的灵活性。
这里的条形图可以看到 d3 是如何做可视化的。
d3包括那些组件
Selection
如果你之前接触过d3,那么你可能对d3 selection 的链式调用有所了解。和 jquery 一样,d3 封装了大部分 DOM 方法,调用其方法会返回一个 selection 对象,你可以接着在这个对象上对 DOM 进行增删改查,事件绑定等操作。
这是一段从官网copy过来的例子
d3.selectAll("p").style("color", "blue"); 复制代码
数据映射
现代前端框架都强调数据驱动,D3中也有类似的概念。例如:
// 步骤1. 绑定数据和 selection var p = d3.select("body").selectAll("p").data([4, 8, 15, 16, 23, 42]); // 步骤2. Enter… p.enter().append("p").text(function(d) { return d; }); // 步骤3. Exit… p.exit().remove(); 复制代码
步骤 1 中我们将 selection 和对应的数据映射起来,selection 中的一个节点对应了数组中一条数据。注意此时并不会生成真实的 dom 节点。步骤2、3 中我们分别声明了数据新增时和删除的 selection 操作。d3 会在数据变化时调用这些操作。
通过数据映射,d3 将数据和 selection 连接起来,使我们免受复杂 dom 状态的困扰,并且保证生成的 dom 是可预测的。enter 和 exit 可以让我们更细粒度的观测到数据的变化,从而作出对应的处理。(比如节点删除动画)
Layout
Layout ,顾名思义,是布局的意思。但d3中的layout强调的是算法而非渲染,这和dataV 或echarts 中将数据和配置传入,直接可以渲染图表不同。以 tree 为例:
d3 的 tree 会接受树结构的数据,经过 layout 的转换,加上坐标,然后数据绑定到 selection,渲染出树结构。可以看到,layout 只负责坐标转换和计算的部分,至于渲染,d3 不会帮你封装好,需要你主动的用 svg、canvas 甚至html进行渲染。
这里是使用 d3 渲染一棵树的例子。
在 React 中使用
react 和 d3 都强调数据驱动,所以将两者结合实际上是非常方便的。
我们只需要将数据保存在react中,把数据和 d3 连接起来,使用d3来绘制页面即可,比如这个例子
需要注意的是,state 变化时 d3 并不会执行 enter 或者 exit 内的方法,需要我们手动 componentDidUpdate
声明周期中主动执行渲染操作。这和 Vue 和 React 的响应式是不同的,d3 并不会去监听 data 的变化,也就不会执行对应的 enter 或 exit 操作。
组件封装
组件化也是很重要的,特别在整个工程变得复杂之前。d3 中也提供了封装组件的方法。这就是 selection.call
方法,例如:
// 声明一个函数,接受 selection 作为参数 function makeStyle(selection) { selection.style("width", 300).style("height", 300); } // 在 div 的 selection 上调用它 d3.select("div").call(makeStyle); 复制代码
通过 selection.call
我们可以封装一些组件,在需要的地方调用即可。
但是当 react 和 d3 结合使用时,使用 react 组件还是 d3 组件呢?大多数情况下,这是要分场景来看的。
1. 当你的界面大部分是 react 渲染而来,而且没有太多交互性时,react 组件是比较好的。比如一个条形图:只需要接受数据和配置,直接渲染出页面。这时把条形图直接做成一个 react 函数式组件,接受 data 和 config,内部使用 d3 来渲染即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 数据可视化系列--svg入门基础(一)
- 这是一本好玩的可视化统计概率入门书
- Python教程Matplotlib数据可视化入门篇
- Python数据可视化神器--pyecharts 快速入门
- Python中常用的可视化工具 Matplotlib 简单入门
- [译] 利用 Python 中的 Bokeh 实现数据可视化,第一部分:入门
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web 2.0 Heroes
Bradley L. Jones / Wiley / 2008-04-14 / USD 24.99
Web 2.0 may be an elusive concept, but one thing is certain: using the Web as merely a means of retrieving and displaying information is history. Today?s Web is immediate, interactive, innovative. It ......一起来看看 《Web 2.0 Heroes》 这本书的介绍吧!