一、基础知识

Node.js ：是运行在服务端的 JavaScript，Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

Vue: The Progressive JavaScript Framework 目前最为流行的前端框架之一，不可否认的是它相比 React 的学习曲线要更为平缓。

VITE：Native-ESM powered web dev build tool. ⾯向未来的前端构建⼯具。

D3：D3.js是一个用于网页作图、生成互动图形的JavaScript函数库。它提供一个d3对象，所有方法都通过这个对象调用。

二、环境配置

1.node.js安装

下载链接：https://nodejs.org/en/download/
认准LTS版本，下载安装即可。

2.Vue安装

在nodejs根目录下执行以下命令：

npm install vue

npm：包管理⼯具，已随 Node.js 默认安装。

结果如下：

3.安装vite：

npm install vite  安装Vite 包
npm init vite-app hellovue   创建工程
npm run dev     运行

结果如下：

三、Vue+D3绘制直方图和力导向图

1.直方图

hist.vue: 数据为随机数

<template><h2><a href="https://d3js.org" target="_blank" >D3直方图@VUE3</a></h2><div id="hist-container"></div>
</template><script>
import { defineComponent } from 'vue';
//import axios from "axios";
import * as d3 from "d3";var data=new Array(20);
for (var i=0;i<20;i++)
{data[i]=Math.floor(Math.random()*255);           console.log(data[i]);
}
var color=d3.schemeCategory10;export default defineComponent({mounted() {      this.drawBarChart(data);      },methods:{drawBarChart(data){var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;w=w*0.98;h=h*0.5;var svg=d3.select("#hist-container").append("svg").attr("width",w).attr("height",h);svg.selectAll("rect").data(data).enter().append("rect").attr("fill",(d,i)=>color[i%10]).attr("x",function(d,i){return w*i/20;}).attr("y",d=>(h-d)).attr("height",d=>d).attr("width",w*0.9/20);}}
})
</script>

2.力导向图（可拖拽）

force.vue：数据采用电视剧《爱情公寓》人物关系网络

<template><h2><a href="https://d3js.org" target="_blank" >D3力导向图@VUE3</a></h2><div id="force-container"></div>
</template><script>
import { defineComponent } from 'vue';
//import axios from "axios";
import * as d3 from "d3";var color=d3.schemeCategory10;var nodes = [{"name":"爱情公寓"},{"name":"曾小贤"},{"name":"胡一菲"},{"name":"吕子乔"},{"name":"陈美嘉"},{"name":"关谷神奇"},{"name":"唐悠悠"},{"name":"陆展博"},{"name":"林宛瑜"},{"name":"张伟"},{"name":"诸葛大力"},{"name":"秦羽墨"},{"name":"诺澜"},{"name":"Lisa榕"},{"name":"杜俊"},{"name":"赵海棠"},{"name":"咖喱酱"}];
var links = [{"source":1,"target":0,"relation":"租户"},{"source":2,"target":0,"relation":"租户"},{"source":3,"target":0,"relation":"租户"},{"source":4,"target":0,"relation":"租户"},{"source":5,"target":0,"relation":"租户"},{"source":6,"target":0,"relation":"租户"},{"source":7,"target":0,"relation":"租户"},{"source":8,"target":0,"relation":"租户"},{"source":9,"target":0,"relation":"租户"},{"source":10,"target":0,"relation":"租户"},{"source":11,"target":0,"relation":"租户"},{"source":15,"target":0,"relation":"租户"},{"source":16,"target":0,"relation":"租户"},{"source":1,"target":2,"relation":"夫妻"},{"source":1,"target":13,"relation":"上下级"},{"source":1,"target":12,"relation":"同事&喜欢"},{"source":2,"target":7,"relation":"姐弟"},{"source":2,"target":11,"relation":"同学"},{"source":2,"target":12,"relation":"情敌"},{"source":3,"target":4,"relation":"夫妻"},{"source":3,"target":6,"relation":"小姨妈/大外甥"},{"source":3,"target":13,"relation":"暗恋"},{"source":4,"target":6,"relation":"闺蜜"},{"source":5,"target":6,"relation":"夫妻"},{"source":5,"target":14,"relation":"师兄弟"},{"source":7,"target":8,"relation":"情侣"},{"source":9,"target":10,"relation":"情侣"},{"source":9,"target":15,"relation":"情敌"},{"source":9,"target":16,"relation":"助理"},{"source":10,"target":15,"relation":"同学"},{"source":10,"target":2,"relation":"师生"},{"source":15,"target":10,"relation":"追求"},{"source":15,"target":2,"relation":"师生"},{"source":13,"target":12,"relation":"同学"}];export default defineComponent({mounted() {      this.drawBarChart(nodes,links);      },methods:{drawBarChart(nodes,links){var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;w=w*0.98;h=h*0.9;var svg=d3.select("#force-container").append("svg").attr("width",w).attr("height",h*1.2);var forceSimulation = d3.forceSimulation().force("link",d3.forceLink()).force("charge",d3.forceManyBody().strength(-800)).force("center",d3.forceCenter(w/2,h/2));forceSimulation.nodes(nodes).on("tick");forceSimulation.force("link").links(links).distance(180);var link=svg.selectAll(".link").data(links).enter().append("line").attr("class","link").style("stroke-width",1).style("stroke",(d,i)=>color[i%10]).style("opacity",0.6);var node=svg.selectAll(".node").data(nodes).enter().append("circle").attr("r",16).style("fill",(d,i)=>color[i%10]).call(drag()); forceSimulation.on("tick",()=>{link.attr("x1",d=>d.source.x).attr("y1",d=>d.source.y).attr("x2",d=>d.target.x).attr("y2",d=>d.target.y);node.attr("cx",d=>d.x).attr("cy",d=>d.y);edges_text.attr("x",d=>(d.source.x + d.target.x) / 2 ).attr("y",d=>(d.source.y + d.target.y) / 2 );texts.attr("x",d=>d.x).attr("y",d=>d.y);});function drag(){function dragstarted(event,d){if(!event.active)   forceSimulation.alphaTarget(0.3).restart();d.fx=d.x;d.fy=d.y;}function dragged(event,d){d.fx=event.x;d.fy=event.y;}function dragended(event,d){if(!event.active)   forceSimulation.alphaTarget(0);d.fx=null;d.fy=null;}return d3.drag().on("start",dragstarted).on("drag",dragged).on("end",dragended);};var edges_text = svg.selectAll(".linetext").data(links).enter().append("text").attr("class","linetext").text(d=> d.relation).style("stroke",(d,i)=>color[i%10]).style("font-size",10);                   var texts=svg.selectAll(".forceText").data(nodes).enter().append("text").attr("class","forceText").style("stroke",(d,i)=>color[i%10]).style("font-size","12px").attr("text-anchor","middle").attr("dy",30).text(d=>d.name);}}
})
</script>

3.结果展示

app.vue：

<template><BarChart /><Hist />
</template><script>
import BarChart from './components/force.vue';
import Hist from './components/hist.vue';export default {name: 'App',components: {BarChart,Hist
}
}
</script>

Vue+D3实现直方图与力导向图相关推荐

Vue+D3 绘制条形图和力导向图
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Vue+D3 绘制条形图和力导向图准备:D3代码 1.条形图 2.力导向图本篇blog在于把已经编写好的D3代码从一般HTML文件 ...
D3 笔记十：力导向图
本文目前来说,是学完极客学院的<D3.js 入门教程>之后的整理出来的精简知识版,仅仅是为了知识整理.后期我会随着学习的深入,在这个基础上,进行维护与更改. 一.力导向图我们先来了解一下 ...
D3 v3版本绘制力导向图更新节点时JS控制台报错：Error: circle attribute cx: Expected length, NaN解决办法
D3的v3版本,很古老了. 拿来绘制力导向图,画布初始化的代码如下: //代码不完整,仅作演示以说明问题 //节点数组var nodes = [ { name: "sssss" , ...
利用D3.js快速绘制力导向图
碎碎念: 最近课题需要基于图论和力导向图可视化每个脑电通道之间的连接性,MATLAB画的效果差强人意,于是上网搜寻到JavaScript 的一个函数库--D3.js,想快速得到数据的可视化结果简介D ...
D3.js 力导向图来处理拓扑图
记录一点碰到的问题和解决方案.感觉国内关于D3.js 4.0版本的相关资料还是少. 力导向图布局 D3一种布局的方式,可以将你nodes links的节点数据转换成可以绘制的坐标点数据,然后通过svg ...
python力导向图论文_力导向图（关系图） echarts的运用
Echarts关系图-力引导布局需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts For ...
深入理解 D3.js 可视化库之力导向图原理与实现
大厂技术坚持周更精选好文简介 D3.js[1] 是一个基于 web 标准的 JS 可视化库,它借助 SVG.Canvas 和 HTML 进行数据可视化.在数据可视化中,我们很多时候会使用图来 ...
d3 力导向图 force graph
背景:项目 vue.js + d3 v4 力导向图可以直观看出各个元素之间的相互作用力数据: {nodes:[{id:xxx, group: xx},{},...] // nodes 是每个节点 g ...
D3.js系列——布局：饼状图和力导向图
一.饼状图在布局的应用中,最简单的就是饼状图. 1.数据有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如 ...
d3力导向图增加节点_d3.js力导向图节点如何都显示在边框内
最近用到d3.js中的force力导向图,想实现效果如下,所有城市节点都在可视范围内,如果超出有滚动条也可以. 遇到的问题是,当节点一多,有的节点就会跑到外面去,这边是通过加大charge相互作用力, ...

Vue+D3实现直方图与力导向图

文章目录