【Vue3+D3】基于Vue3+D3的数据可视化

最新推荐文章于 2024-06-05 09:58:54 发布
最新推荐文章于 2024-06-05 09:58:54 发布
阅读量6.1k 收藏 27
点赞数 6
文章标签： vscode 前端 计算机视觉 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45939929/article/details/124501148
版权

目录

一、安装

（一）安装Node.JS

（二）安装Vue

（三）安装Vite

（四）安装VSCode

二、创建项目

三、数据可视化

（一）安装D3和axios

（二）绘制直方图

（三）绘制饼图

一、安装

（一）安装Node.JS

        Node.js 是一个基于 Chrome JavaScript 运行时建立的平台；是一个事件驱动 I/O 服务端的 JavaScript 环境，基于 Google 的 V8 引擎（ V8 引擎执行 Javascript 的速度非常快，性能非常好）。总之，简单来说，Node.js 就是运行在服务端的 JavaScript 。它的目的是使前后端完全分离（前端 Node.js，后端 Python/Java ）

        首先，我们到官网下载 Node.JS。因为我的电脑是64位的，所以我选择了64位Windows安装包（.msi），并下载到了"D:/node js/"路径下。下载 | Node.js 中文网http://nodejs.cn/download/

        下载好之后，打开命令提示符cmd转到Node.JS路径下（我这里是D:/node js/），查看是否下载成功以及下载的版本。可以看到我这里下载的是16.14.2版本。

         我们先来写一个简单的代码测试一下下载情况。在Node.JS路径下创建server.js文件，并写入以下内容：

var http = require('http');

http.createServer(function(request,response) {
	
	// 发送 HTTP 头部
	// HTTP  状态值：200：OK
	// 内容类型：text/plain
	response.writeHead(200,{'Content-Type':'text/plain'});
	
	// 发送响应数据 "Hello World"
	response.end('Hello World\n');
}).listen(8888);

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

        在cmd中键入 node server.js ，显示代码已经在网页中运行，我们打开它所指向的http://127.0.0.1:8888/，发现成功显示"Hello World"，证明我们的Node.JS安装成功，且环境是正常可用的。（点击 Ctrl+C 可退出当前的 cmd 环境）

（二）安装Vue

        在 cmd 的 Node.JS 路径下（我这里为"D:/node js/"）键入如下内容：

npm install vue
// 或者
npm install vue@next

        如果大家在现在及之后的安装过程中遇到报错提示“缺少相关文件”，可以点击Node.js安装包（.msi文件）中的Repair进行修复，亲测有效！

（三）安装Vite

        在 cmd 的 Node.JS 路径下（我这里为"D:/node js/"）键入如下内容：

npm install vite

（四）安装VSCode

        VSCode安装过程可查看这篇博客，讲的超级详细！

VSCode安装使用教程（最新详细版）_Passerby_Wang的博客-CSDN博客_vscode安装教程最新版教程，1.63版本（超详细图文解说）1、下载2、安装3、初始化设置https://blog.csdn.net/Passerby_Wang/article/details/122179913        VSCode安装好之后，推荐大家安装两个扩展插件——Chinese Language Pack for Visual Studio Code和Volar，对后续的编程很有用。

二、创建项目

        在 cmd 或 VSCode 的终端中使用 Vite 创建项目：

npm create vite@latest

# 按照提示创建
# 1.输入项目名，例如：csdn_test
# 2.创建 vue 项目

cd <你的项目>   # 例如：cd csdn_test
npm install    # 下载依赖包
npm run dev    # 执行

        这时，它会自动显示出网页地址，如我这里的 http://localhost:3000/ ，我们在浏览器中打开该网页，会看到如下结果。

 

三、数据可视化

（一）安装D3和axios

        在项目目录下（我这里为"D:/node js/csdn_test/"）安装D3和axios，键入以下代码：

npm install d3
npm install axios

        这样，我们就可以在项目目录下的node_modules中（我这里为"D:\node js\csdn_test\node_modules"）看到我们需要用到的安装包。 接下来就可以在VSCode中编辑代码，进行数据可视化啦！

（二）绘制直方图

        首先我们尝试将之前学过的d3.js代码绘制的直方图修改为vue绘制的直方图。在 src/components/ 路径中删除HelloWorld.vue，新建Hist.vue文件，并写入如下代码：

<template>
    <h1>我国人口受教育程度-直方图</h1>
    <div id="bar-chart-container"></div>
</template>

<script>
import { defineComponent } from 'vue';
//import axios from "axios";
import * as d3 from 'd3';

var dataset = [["小学及以下",19.3],["初中",40.3],["高中/中专/技校",20.6],
			   ["大学专科",10.5],["大学本科及以上",9.3]];
var color=d3.schemeCategory10;

export default defineComponent({
    mounted() {      
        this.drawBarChart(dataset);      
    },
    methods:{
        drawBarChart(dataset){
            const w = 1200;
            const h = 500;
            var svg=d3.select("#bar-chart-container")
                        .append("svg")
                        .attr("width",w)
                        .attr("height",h);
			
			var rect = svg.selectAll("rect")
						  .data(dataset)
						  .enter()
						  .append("rect")
						  .attr("x",function(d,i){
								return i*((w-500)/dataset.length)+250;
						  })
						  .attr("y",function(d){
								return h-d[1]*8-20;
						  })
						  .attr("width",((w-500)/dataset.length-20))
						  .attr("height",function(d){
								return d[1]*8;
						  })
						  .attr("fill",function(d,i){
								return color[i];
						  });
			
			var number = svg.selectAll("text1")
						  .data(dataset)
						  .enter()
						  .append("text")
						  .attr("fill","black")
						  .attr("x",function(d,i){
								return i*((w-500)/dataset.length)+250;
						  })
						  .attr("y",function(d){
								return h-d[1]*8-40;
						  })
						  .attr("dx",45)
						  .attr("dy","1em")
						  .attr("font-size",14)
						  .text(function(d){
								return d[1]+"%";
						  });
			
			var index = svg.selectAll("text2")
						  .data(dataset)
						  .enter()
						  .append("text")
						  .attr("fill","black")
						  .attr("x",function(d,i){
								return i*((w-500)/dataset.length)+250;
						  })
						  .attr("y",h-15)
						  .attr("dx",20)
						  .attr("dy","1em")
						  .attr("font-size",14)
						  .text(function(d,i){
								return d[0];
						  });
        }
    }
})
</script>

        修改App.vue的内容如下：

<!-- App.vue -->
<template>
  <Hist />
</template>

<script>
  import Hist from "./components/Hist.vue";
  
  export default {
    name: "App",
    components: {
    Hist,
}, 
  };
</script>

        效果图如下所示：

 

        接下来，我们增加一点难度，绘制一个更加复杂一点的直方图。为了测试代码，我们这里提供一个 alphabet.json 作为之后可视化的数据。从网盘下载后放入新建好的项目的 public 文件夹中，我们可以通过访问 http://localhost:3000/alphabet.json 看到JSON文件。

链接：https://pan.baidu.com/s/1qcXwEwje5zjgnYkBM9UoOw?pwd=0cji 
提取码：0cji

        现在我们已经有了数据，可以正式开始写代码了。首先，在 src/components/ 路径中删除HelloWorld.vue，新建BarChart.vue文件，并写入如下代码：

<template>
    <h2>咱是直方图📊</h2>
    
    <!-- 定义一个bar-chart-container的容器，以供D3操作 -->
    <div id="bar-chart-container"></div>
</template>

<script>
    import axios from "axios";
    export default {
        /**  
        * 在挂载后即开始执行     
        */
        mounted() {
            axios.get("./alphabet.json").then((res) => {
                console.log(res.data);      
            });    
        },  
    };
</script>

        修改 APP.vue

<!-- App.vue -->
<template>
  <BarChart />
</template>

<script>
  import BarChart from "./components/BarChart.vue";
  
  export default {
    name: "App",
    components: {
        BarChart,    
    }, 
  };
</script>

        之后回到 BarChart.vue 中导入 d3 和 axios，搭起基本框架。将script中的代码修改如下：

<script>
    import axios from 'axios';
    import * as d3 from 'd3';
    
    export default {
        data() {
            return {
                color: "steelblue",
                margin: { top: 30, right: 0, bottom: 30, left: 40 },      
            };    
        },
        
        mounted() {
            axios.get("./alphabet.json").then((res) => {
                console.log(res.data);      
            });   
        },
    
        methods: {
            drawBarChart(data) {      
            },    
        },  
    };
</script>

        在 drawBarChart() 函数中初始化 SVG 元素，并放置于我们定义好的bar-chart-container容器中。

const margin = this.margin;
const width = 800;
const height = 500;
// 初始化SVG元素
const svg = d3.select("#bar-chart-container")
              .append("svg")        
              .attr("class", "bar-chart")      
              .attr("viewBox", `0 0 ${width}${height}`)      
              .attr("width", width)        
              .attr("height", height)        
              .append("g");

        配置比例尺的缩放范围及间距。

// https://observablehq.com/@d3/d3-scaleband
// x轴的缩放比例尺
const x = d3.scaleBand()        
            .domain(d3.range(data.length))        
            .range([margin.left, width-margin.right])        
            .padding(0.1);
                
// y轴的缩放比例尺
const y = d3.scaleLinear()        
            .domain([0, d3.max(data, (d) =>d.value)])        
            .nice()        
            .range([height-margin.bottom, margin.top]);

        定义绘制X/Y坐标轴的函数：

  • tickSizeOuter(0)：移除 0 处初始的标记
  • tickFormat：记号格式
  • axisLeft：绘制左侧坐标轴
// x坐标轴
// tickSizeOuter(0):移除0处初始的标记
// tickFormat https://github.com/d3/d3-scale/blob/master/README.md#tickFormat
const xAxis= (g) =>
    g.attr("transform", `translate(0,${height-margin.bottom})`)
     .call(
         d3.axisBottom(x)            
           .tickFormat((i) => data[i].name)            
           .tickSizeOuter(0)        
     );

// y坐标轴
const yAxis = (g) =>
    g.attr("transform", `translate(${margin.left},0)`)
     .call(
         d3.axisLeft(y)
           .ticks(null, data.format)
     )
     // 移除区域间的竖线          
     .call((g) => g.select(".domain").remove())          
     .call((g) => 
         g.append("text")              
          .attr("x", -margin.left)              
          .attr("y", 10)              
          .attr("fill", "currentColor")              
          .attr("text-anchor", "start")              
          .text(data.y)          
     );

        根据数据绘制直方图、坐标轴，并添加到SVG中。

svg.append("g")        
   .attr("fill", this.color)        
   .selectAll("rect")        
   .data(data)        
   .join("rect")        
   .attr("x", (d, i) => x(i))        
   .attr("y", (d) => y(d.value))        
   .attr("height", (d) => y(0)-y(d.value)) 
   .attr("width", x.bandwidth());
                
// 绘制到SVG
svg.append("g")
   .call(xAxis);
svg.append("g")
   .call(yAxis);

        对此前的数据（这是一个英文字母使用频率的统计）进行简单的格式化：将 letter 与 frequency 分别映射到 name 与 value 字段，并降序排列。

<script>
    export default {
        ...,
        methods: {
            /**       
             * 格式化数据       
             */
            formatData(data) {
                return data.map(({ letter, frequency }) => {
                                return { name: letter, value: frequency };          
                           })
                           .sort((a, b) =>d3.descending(a.value, b.value));                      
                },
            
            drawBarChart(data) {...},    
        },  
    };
</script>

        现在，我们只需要在 mounted 中执行我们定义好的各个函数即可看到我们想要的直方图效果。

<script>
    export default {
        ...,
        
        mounted() {
            axios.get("./alphabet.json").then((res) => {
                const barChartData = Object.assign(this.formatData(res.data), {
                    format: "%",
                    y: "↑ Frequency",        
                });
                this.drawBarChart(barChartData);      
            }) 
        },
        
        methods: {...},
    };   
</script>

        直方图效果如下所示：

 

        

（三）绘制饼图

        下面，我们根据“我国人口受教育程度”的数据来绘制一个南丁格尔玫瑰图，该代码同样是由d3.js代码修改而成。在 src/components/ 路径中新建ArcPie.vue文件，并写入如下代码：

<template>
    <h1>我国人口受教育程度-饼图</h1>
    <div id="arcPie-container"></div>
</template>

<script>
import { defineComponent } from 'vue';
//import axios from "axios";
import * as d3 from "d3";

var dataset = [["小学及以下",19.3],["初中",40.3],["高中/中专/技校",20.6],
			   ["大学专科",10.5],["大学本科及以上",9.3]];
console.log(dataset);
var color=d3.schemeCategory10;

export default defineComponent({
    mounted() {      
        this.drawArcPie(dataset);      
    },
    methods:{
        drawArcPie(dataset){
            const w = 1200;
            const h = 500;
            var svg=d3.select("#arcPie-container")
                      .append("svg")
                      .attr("width", w)
                      .attr("height",h);

			var pie = d3.pie()
						.value(function(d){
							return d[1];
						});
			var piedata = pie(dataset);
			
			var inner = 50;
			var arc = d3.arc()
						.innerRadius(inner)
						.outerRadius(function(d) {
							var value = d.value;
							return value*4 + inner;
						});		

			var arcs = svg.selectAll("g")
						  .data(piedata)
						  .enter()
						  .append("g")
						  .attr("transform","translate("+(w/2)+","+(h/2+50)+")");
						  
			arcs.append("path")
				.attr("d",function(d){
					return arc(d);
				})		  
				.attr("stroke","black")
				.attr("fill",(d,i)=>color[i]);
			
			svg.selectAll("text1")
			   .data(piedata)
			   .enter()
			   .append("text")
			   .attr("transform",function(d){
					//return "translate("+w/2+","+(h/2+50)+")" + "translate("+arc.centroid(d)+")";
					var x = arc.centroid(d)[0];
					var y = arc.centroid(d)[1];
					return "translate("+(w/2+x)+","+(h/2+50+y)+")";
				})
			   .attr("text-anchor","middle")
			   .attr("fill","black")
			   .attr("font-size","12px")
			   .text(function(d,i){
					//return Math.floor((d.endAngle - d.startAngle)*180/Math.PI) + "°";
					return d.value+"%";
			   });
			
			var hei = [240,265,290,315,340];
			svg.selectAll("c")
			   .data(hei)
			   .enter()
			   .append("circle")
			   .attr("cx",980)
			   .attr("cy",function(d,i){
					return d;
			   })
			   .attr("r",6)
			   .attr("fill",function(d,i){
					return color[i];
			   });
			  
			svg.selectAll("text2")
			   .data(hei)
			   .enter()
			   .append("text")
			   .attr("transform",function(d,i){
					var x = 1000;
					var y = d+6;
					return "translate("+x+","+y+")";
			   })
			   .attr("fill","black")
			   .attr("font-size","14px")
			   .text(function(d,i){return dataset[i][0];});
		}
	}
})
</script>

        修改App.vue如下：

<!-- App.vue -->
<template>
  <Hist />
  <ArcPie />
</template>

<script>
  import Hist from "./components/Hist.vue";
  import ArcPie from "./components/ArcPie.vue";
  
  export default {
    name: "App",
    components: {
    Hist,
    ArcPie,
    }, 
  };
</script>

        效果如下所示：

米克斯泡泡_
关注
  • 6
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用vue3+d3实现一个小的数据可视化网页
RaBaSrCaMgBe的博客
05-13 1849
利用vue3+d3，弄了一个数据可视化的小网页。
如何在Vue3中使用D3.js实现数据可视化？
最新发布
有我更精彩的博客
06-14 659
随着Web技术的发展，数据可视化已经成为前端开发中的一个热门话题。而D3.js作为最强大的数据可视化库之一，通常与各种前端框架一起使用，如Vue.js。在这篇文章中，我们将探讨如何在Vue3中结合D3.js来实现数据可视化。我们将通过一个具体的示例，逐步介绍实现的过程。
探索数据之美：Vue与D3的可视化利器——d3-vs
gitblog_00073的博客
06-05 278
探索数据之美：Vue与D3的可视化利器——d3-vs 项目地址:https://gitcode.com/GopherJ/Vs 在大数据和可视化日益重要的今天，选择一款强大且易用的数据可视化库至关重要。【d3-vs】就是这样一颗璀璨的明星，它结合了流行的前端框架Vue.js和数据可视化库d3.js，以及地图处理库Leaflet，提供了一套完整的解决方案，帮助开发者轻松实现复杂的数据可视化。 项目介绍...
Vue D3 力导向图（推荐阅读）
hsany330的专栏
05-14 5047
1. 安装 前端工程根目录下执行yarn add d3，安装 d3 依赖包。安装的版本"d3": "^5.7.0" 2. vue 文件中引入 d3 import * as d3 from 'd3' 例如一个基础的 d3.vue 文件内容，包含基本的<template><script><style> <template> <div> <svg width="960" height="600"></...
Vue+D3实现直方图与力导向图
victorie的博客
05-12 2114
文章目录一、基础知识二、环境配置1.node.js安装2.Vue安装3.安装vite：三、Vue+D3绘制直方图和力导向图1.直方图2.力导向图（可拖拽）3.结果展示 一、基础知识 Node.js ：是运行在服务端的 JavaScript，Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。 Vue: The Progressive JavaScript Framework 目前最为流行的前端框架之一，不可
D3数据可视化（Vue和Vite）
zzyandzzz的博客
05-13 1821
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 在搭建vue之前，我们需要先进行一下准备活动，搭建好环境,安装好某些命令。 提示：以下是本篇文章正文内容，下面案例可供参考 一、准备阶段 1.安装node.js 下载地址：http://nodejs.cn/download/ 下载并安装好之后，可以打开终端，输入命令查看是否安装成功 node --ver.
vue使用dagre-d3画流程图
tt1234561009的博客
10-18 4074
edges用来存储线条数据，start是开始节点，end是结束节点，label可以给线条命名。还可以使用render.shapes()自定义形状。需求：根据表格中的工序名称和上工序生成流程图。2）circle,ellipse(椭圆)数据处理，把表格数据转变成节点和线条数据。3）diamond(菱形)这世界很喧嚣，做你自己就好。1）rect(长方形)
Vite + Vue 3 + D3实现力导向图
fxtxz2的专栏
04-12 1802
问题 需要展示复杂的力导向图，通过neo4j的实例代码可以知道，使用d3.js来处理相关前端渲染。这里通过集成vue3，vite来使用D3.js v7版本。 解决 Vite+Vue3 创建vue工程： npm init vue@latest 配置： Vue.js - The Progressive JavaScript Framework ✔ Project name: … vue-d3v7 ✔ Target directory "vue-d3v7" is not empty. Remove exist
基于Neo4j+springboot+vue+d3.js知识图谱构建和可视化
05-09
在这个项目中，我们结合了Neo4j数据库、Spring Boot后端框架、Vue.js前端库以及d3.js数据可视化库，来构建和可视化知识图谱。下面将详细阐述各个组件在知识图谱构建中的作用和相关技术要点。 **Neo4j** 是一个高...
Neo4j+springboot+vue+d3.js知识图谱构建和可视化
01-17
在构建和可视化知识图谱的过程中，我们通常会...以上就是使用Neo4j、SpringBoot、Vue.js和d3.js构建知识图谱及可视化的关键知识点，它们共同作用，形成一个完整的知识图谱系统，能够有效地管理和展示复杂的关系数据。
vue使用D3对neo4 j进行可视化
05-13
Neo4j Vue 安装步骤 克隆或下载该库到本地 下载neo4j并安装到本地，启动neo4j服务 进入到该工程的根目录，输入命令：npm run update进行npm包的导入 使用命令：npm run dev启动该工程 默认端口是：8081 neo4j账号...
vued3一个D3的Vuejs插件
08-10
vue-d3：一个D3的Vue.js插件
vue-d3-graph:vue+d3v6实现动态知识图谱可视化展示（包含2D和3D图谱展示）
07-09
博客地址：...由于发现在我的博客通过点击GitHub链接，会跳转到别人盗用的下载地址，而且还是VIP收费，所以自己把代码上传CSDN资源上。 【因为缺分，所以收5个积分，免费可以到Github上下载最新的代码】
Vue2 D3.js demo
03-03
Vue2 D3.js Demo是一个结合了Vue2框架与D3.js数据可视化库的示例项目。这个项目旨在展示如何在Vue2应用中有效地利用D3.js来创建动态、交互式的图表和数据可视化组件。Vue2是一款轻量级的前端JavaScript框架，以其...
基于Vue.js和D3.js的智能停车可视化系统
欢迎来到“Python算法探索”，我是GT算法工程师，一名热爱计算机算法的博主。在这里，我们将一起深入探索Python世界中的各种算法，从基础到高级，从理论到实践。我参加过很多算法比赛，积累了丰富的经验，希望通过这个播客与你分享。让我们一起用Python探
03-20 1275
本文将介绍如何使用Vue.js和D3.js构建一个智能停车可视化系统，帮助用户快速了解停车场的车位情况。
vue3.0 + D3.js 实现拓扑绘图
qfzhangwei的专栏
04-02 4417
2. Vue组件中引入 D3.js。
vue3中使用d3.js绘制流程图(TS语法)
qq_45079530的博客
07-11 4599
【代码】vue3中使用d3.js绘制流程图(TS语法)
在Vue3.0里面动态创建svg(d3.js)
ouyangyiming的博客
09-28 1247
svg, d3
vue+D3项目拓扑图缩放，拖拽，保存布局等
feiyang678966的博客
10-18 6740
注意：vue+D3里面的当数据更新的时候，需要先将之前的数据绘画的点清除 (选择所有的点清除，才可以重新绘画)，否则将会重新绘画两次，因为之前的数据渲染的视图并没有清除，这该d3和query功能差不多 ，都是原生js的一些封装，所以不会像那些表格插件一个，选择的时候，初始化一下。故这里需要手动初始化。 找了很多资料对vue+D3实现的这些拓扑图的代码比较， getLinksData:f...
D3DXCreateTextureFromFile
07-16
D3DXCreateTextureFromFile是DirectX 9中的一个函数，用于从文件中创建纹理对象。以下是该函数的原型： ```cpp HRESULT D3DXCreateTextureFromFile( LPDIRECT3DDEVICE9 pDevice, LPCTSTR pSrcFile, LPDIRECT3DTEXTURE9 *ppTexture ); ``` 参数说明： - pDevice：指向IDirect3DDevice9接口的指针，表示渲染设备对象。 - pSrcFile：纹理文件的路径和文件名。 - ppTexture：指向LPDIRECT3DTEXTURE9类型指针的指针，用于接收创建的纹理对象。 函数返回一个HRESULT类型的值，表示函数执行的结果。如果函数执行成功，返回值为D3D_OK。 下面是一个使用D3DXCreateTextureFromFile函数创建纹理的示例代码： ```cpp IDirect3DDevice9* pDevice; // 渲染设备对象 IDirect3DTexture9* pTexture; HRESULT hr = D3DXCreateTextureFromFile(pDevice, "texture.png", &pTexture); if (FAILED(hr)) { // 纹理创建失败，处理错误 // ... } else { // 纹理创建成功，可以使用pTexture对象进行绘制 // ... } ``` 请注意，D3DXCreateTextureFromFile函数需要链接到D3dx9.lib库，并且需要正确设置DirectX 9相关的头文件和库文件。此外，建议检查纹理文件路径是否正确，并确保该文件存在且格式正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值