前端数据可视化d3技术简介

Yolanda_2022 2024-06-24 08:33:01 阅读 78

D3

本文参考自mooc教程。

D3（Data-Driven Documents）是一个 Javascript 图形库，基于 Canvas、Svg 和 HTML。

D3强调web标准为您提供了现代浏览器的完整功能，而没有将自己的专有框架与强大的可视化组件和数据驱动的DOM操作方法相结合。

D3是一个专门用于2d场景数据可视化的库。

WHY社区中已经有很多处理数据可视化的js库。我们为什么要学习D3？

高度打包的库（如echarts、highcharts）可以在PC和移动设备上很好地运行，并且与当前大多数浏览器兼容。一些常见的条形图、饼图和折线图已经被很好地打包，因此开发人员可以直接使用它们而无需做太多工作。

当开发过程中出现一些需要个性化显示的视觉需求时，像echarts、highcharts这样的库就无法得到很好的支持。这时候就需要更灵活的D3了。D3就像一把画笔，可以让你在浏览器中自由展示你的智慧和才华，让你更好地自由发挥。

D3可以提供很好的自由度，这意味着它的入门难度更高，学习成本也比echarts等配置的可视化库更高。至于在项目中选择哪个库，需要结合项目需求和团队成员的能力。

D3案例和入门方法

::: tip

D3 的案例

:::

D3 是一个较为复杂的图形库，如果想入门 D3 可以从这里开始

D3可以给我们做很多矢量图形，地图，折线图等等，最拿手的是矢量图，关系图，思维导图等。

d3核心原理

数据驱动，即拿到数据更新dom来实现的

d3绑定数据的函数

绑定数据主要有两个函数。

Datum():将一个数据绑定到所选元素;

data():将一个数组绑定到所选元素，数组的每个值分别绑定到所选元素的每个元素。

d3如何选择元素

通用API选择元素

d3.select（）方法允许你通过选择器或者特定条件选择文档中的元素，然后可以对选择的元素进行各种操作，比如设置样式、绑定数据、添加交互等。

d3.selectAll(）可以选择文档中多个元素，然后对这些元素进行一系列的操作，比如设置样式、绑定数据、添加过渡效果等。

绑定数据是D3特有的功能，可以将数据绑定到DOM。

入门案例：数据绑定

点击按钮，修改页面数据

在这里插入图片描述

::: details

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v5.js"></script> </head> <body> <p>Vue</p> <p>React</p> <p>Agular</p> <button id="datum">datum</button> <button id="data">data</button> <script> // 注意这里的body和p并不是dom对象，而是d3中的dom对象，也便是d3（Data-Driven Documents）中的document var body = d3.select("body"); var p = body.selectAll("p"); function doDatum() { // datum var str = "Framework"; p.datum(str);// datum会将p中的内容进行修改 p.text(function(d, i) { return `${ d}-${ i}`; }); // datum后需要调用text，对p中的值进行修改 } function doData() { // data var dataset = ['Vue', 'React', 'Agular']; p.data(dataset) .text(function(d, i) { return `${ d}-${ i}`; }); // .data会将dataset中的值和p标签一一对应 } document.getElementById('datum').addEventListener('click', function(e) { doDatum(); }); document.getElementById('data').addEventListener('click', function(e) { doData(); }); </script> </body></html>

:::

d3实现原理都是先通过dom的方式选取到d3的dom，然后通过数据驱动的方法进行开发。

项目中有需求的时候，我们可以用d3来实现矢量图。

进阶案例：思维导图

在这里插入图片描述

这里为大家找了一个非常不错的 D3 入门案例：如何绘制思维导图，案例源码点击这里下载

上一篇： java: 无法访问org.springframework.web.WebApplicationInitializer找不到org.springframework.web.WebApplication

下一篇： VUE3+TS+elementplus+Django+MySQL实现从数据库读取数据，显示在前端界面上

本文标签

前端数据可视化d3技术简介

声明

本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。