数据可视化之路 - d3入门

栏目: 数据库 · 发布时间: 5年前

内容简介: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入门

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 来渲染即可。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Out of their Minds

Out of their Minds

Dennis Shasha、Cathy Lazere / Springer / 1998-07-02 / USD 16.00

This best-selling book is now available in an inexpensive softcover format. Imagine living during the Renaissance and being able to interview that eras greatest scientists about their inspirations, di......一起来看看 《Out of their Minds》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器