JavaScript 可视化库D3介绍
渲染器的选择
- SVG
- Canvas
- HTML element
一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 特效。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。 选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。 在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。 在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验: 在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略得说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 水球图 等,SVG 渲染器可能效果更好。 数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。 我们强烈欢迎开发者们反馈给我们使用的体验和场景,帮助我们更好的做优化。
![](https://i-blog.csdnimg.cn/blog_migrate/fee7b1224b3cd63f6ac84cb7d6f80eb6.png)
引入
import {scaleLinear} from "d3-scale";
import * as d3 from "d3";
const d3 = await import("d3");
d3当中的核心概念
最简单的一个例子
d3.js当中主要使用 SVG 进行开发,相比直接操作恶心的HTML DOM,D3提供的一套声明式语法更加舒服。
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "blue", null);
}
显然能够降低心智负担
d3.selectAll("p").style("color", "blue");
d3.selectAll("p").style("color", function(d, i) {
return i % 2 ? "blue" : "red";
});
selection
概念
d3当中大部分的操作都是针对selection进行的
- 事件侦听
- style属性设置
- 数据绑定
- …
通过以下函数可以生成一个selection
d3.create() //创造一个元素
d3.select() //选择匹配的第一个元素
d3.selectAll() //选择一组元素
Selection对象的结构如下
{
export function Selection(groups, parents) {
this._groups = groups;
this._parents = parents;
}
function selection() {
return new Selection([[document.documentElement]], root);
}
function selection_selection() {
return this;
}
Selection.prototype = selection.prototype = {
constructor: Selection,
select: selection_select,
selectAll: selection_selectAll,
selectChild: selection_selectChild,
selectChildren: selection_selectChildren,
filter: selection_filter,