【D3.js】D3是什么

news/2024/11/15 8:10:14/

D3是什么

D3 的全称是 Data-Driven Document,可以理解为:由数据来决定绘图流程的程序设计模型。

D3 是一个JavaScript的函数库,是用来做数据可视化的。

将数据变成图形,要想用原生的 HTML、SVG、Canvas 来实现是烦琐和困难的。D3 为我们封装好这些,让开发者能更注重图表的布局和逻辑。

D3 的优势

  JavaScript 的前端可视化库,除了 D3 外还有不少:Highcharts、Echarts、Chart.js。它们可以看作一类的,共同特点是封装层次很高,能够非常简单地制作图表,但是给予开发者控制和设计的空间很少。封装层次太高自然会失去部分自由,但太低又会使程序过长,D3 在这一点上取得了平衡。

D3 的特性

  1. 数据与元素捆绑的特性
    D3 能够将数据与 DOM 绑定在一起,使数据与图形称为一个整体。
  2. 计算和绘图相互独立的特性
    将数据变成图表,可分为两步:计算和绘图
    在 D3 里,计算和绘图是分开的。在可视化的设计比较复杂时,计算和绘图分开易于调整和操作细节。
  3. 链式语法
  4. 强大的图形计算能力
  5. 同时支持SVG和Canvas
    SVG 和 Canvas 是 HTML5 用于绘图的元素,分别用于绘制矢量图和标量图,各自有自己的适用领域。D3 3.x 以前是以 SVG 为基础的,主要提供 SVG 的绘图能力。从 4.x 开始支持 Canvas。

相关概念

  数据可视化 和 信息可视化 很相近,有时几乎可以等同。但严格来说它们是不同的:

  • 数据可视化是对数字信息进行可视化
  • 信息可视化是对数字信息和非数字信息进行可视化

图表种类

  1. 柱形图
  2. 散点图
  3. 折线图
  4. 饼状图
  5. 弦图
    弦图 用于表示节点之间的联系。两点之间的连线表示哪两个节点具有联系,线的粗细表示权重。
  6. 力导向图
    力导向图 适合描述大量节点之间的关系,各节点之间具有相互作用力。各节点之间用线相连,相连的顶点表示具有一定的关系。实际应用时可以赋予节点和连线实际的意义,做成人物关系图、力导向图等。
  7. 树图
    树图 用于表示层级、上下级、包含于被包含关系,与之类似的还有集群图。

http://www.ppmy.cn/news/130910.html

相关文章

易基因 - 外泌体let-7d-3p和miR-30d-5p作为宫颈癌及其癌前病变无创筛查的诊断标志物|早期筛查

易点评 循环外泌体RNA(尤其是miRNA)已经成为检测早期癌症的最具前景的生物标志物之一。本研究即是一例循环外泌体作为宫颈癌早期筛查潜在标志物的开发案例。 背景 宫颈癌(CC)是20至39岁女性患癌症致死的第二大病因。其发病率和死亡率分别为98.9/10万和…

prometheus 查询30d数据出现query processing would load too many samples问题

问题现象:prometheus查询长时间段的数据时出现query processing would load too many samples的问题,导致数据查询不出来。 问题原因:prometheus为了对自身进程进行保护,进行了限制,默认为50000000.可以通过--query.m…

d3-动画

1.效果图 小球会从&#xff08;0&#xff0c;0&#xff09;位置过渡到最终的位置&#xff0c;显示动画效果&#xff0c;点击更新、增加、减少按钮能看到具体呈现的动画效果&#xff01; 2. 代码 <template langpug>div.histogram-pane(:idid)<div class"btn-pa…

宝塔配置Laravel站点,图片不显示

前些天用Linux配置Laravel站点&#xff0c;配置完成后无法打开显示&#xff01;&#xff01;&#xff01;&#xff01; 图片可以正常上传&#xff0c;但是下载提示404&#xff01;&#xff01;&#xff01;&#xff01; 宝塔中的Nginx的坑。 使用宝塔添加站点后 会在配置中默认…

nginx aliase失效

nginx aliase失效 今天遇见了nginx配置 aliase失效的情况 原来的配置是 location /image/ {alias /data/wwwroot/ms-registrationtool.cn/manager/uploadPath/image;}location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${expires 30d;}当访问图片的时候结果遇见无法匹配的情况。…

SpringCloud Ribbon 学习

SpringCloud Ribbon 学习 文章目录 SpringCloud Ribbon 学习1. Ribbon 是什么&#xff1f;2. LB(Load Balance)3 Ribbon 架构图&机制4 Ribbon 常见负载均衡算法5 测试 1. Ribbon 是什么&#xff1f; Spring Cloud Ribbon 是基于 Netflix Ribbon 实现的一套客户端 负载均衡…

穿越时空的爱恋-Z80 CPU的前世今生

穿越时空的爱恋-Z80 CPU的前世今生 它是1976年推出时&#xff0c;与6502 CPU 一起&#xff0c;引发了一系列项目&#xff0c;导致了 80 年代初期的家用计算机革命。同时你能想象在CPU更新迭代速度这么快的时代&#xff0c;直到今天他还在服役&#xff0c;还没“退休”。 TRS-80…

8K HDR!|为 Chromium 实现 HEVC 硬解 - 原理/实测指南

本文作者&#xff1a;朱思达 飞书技术团队 HEVC 的现状 背景简介 什么是 HEVC &#xff1f;简单说就是一种比 H264 压缩效率更高的现代视频编码格式&#xff0c;它支持 8K&#xff0c;支持 HDR&#xff0c;支持广色域&#xff0c;支持最高 16bit 的色彩深度&#xff0c;最高 …