JavaScript 可视化库D3介绍

JavaScript 可视化库D3介绍

渲染器的选择

• SVG
• Canvas
• HTML element

一般来说，Canvas 更适合绘制图形元素数量较多（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 特效。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、并且用户使用浏览器内置的缩放功能时不会模糊。 选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。 在软硬件环境较好，数据量不大的场景下，两种渲染器都可以适用，并不需要太多纠结。 在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验： 在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 水球图 等，SVG 渲染器可能效果更好。 数据量较大（经验判断 > 1k）、较多交互时，建议选择 Canvas 渲染器。 我们强烈欢迎开发者们反馈给我们使用的体验和场景，帮助我们更好的做优化。

来自echarts 最佳实践 canvas vs svg

引入

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,