一、任务目标

使用vue制作一个包含d3直方图的网页再加上一个饼图、词云图或力导向图。

二、代码实现主要部分

1. App.vue文件中加入力导向图

<template><img alt="Vue logo" src="./assets/logo.png" /><HelloWorld msg="Hello Vue 3.0 + D3" /><HelloD3 msg="D3.JS@Vue3"/><BarChart /><Force />
</template><script>
import HelloWorld from './components/HelloWorld.vue'
import BarChart from './components/BarChart.vue';
import HelloD3 from './components/D3Hist.vue';
import Force from './components/1.vue';export default {name: 'App',components: {HelloWorld,BarChart,HelloD3,Force}
}
</script>

2. 编写力导向图的js文件

代码如下：

data = pd.read_csv('https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

3. 编写力导向图的js文件

代码如下：

<template>
<h2><a href="https://d3js.org" target="_blank" >D3力导向图@VUE3</a></h2>
<div><svg id="svg2" width="1200" height="800" ></svg>
</div>
</template>
<script>
import * as d3 from "d3";export default {name: "ForceDirected",props: {id: String,width: String,height: String,nodes: Array,edges: Array,},data() {return {      };},mounted() {this.init();},watch: {load() {this.init();},},methods: {init() {let marge = { top: 100, bottom: 60, left: 60, right: 60 };let svg = d3.select("#svg2");let width = 900;let height = 600;let g = svg.append("g").attr("transform", "translate(" + marge.top + "," + marge.left + ")");// 准备数据// 节点集let nodes = [//节点集{name:"中国传媒大学"},{name:"信息科学与技术学部"},{name:"新闻传播学部" },{name:"艺术学部" },{name:"人文社科学部" },{name:"广告与经管学部" },{name:"协同创新中心" },{name:"直属学院" },{name:"信息与通信工程学院"  },{name:"计算机与网络空间安全学院"  },{name:"数据科学与智能媒体学院"  },{name:"实验教学中心"  },{name:"新闻学院"  },{name:"电视学院"  },{name:"传播研究院"  },{name:"戏剧影视学院"  },{name:"播音主持艺术学院"  },{name:"动画与数字艺术学院"  },{name:"音乐与录音艺术学院"  },{name:"艺术研究院"  },{name:"艺术教育中心"  },{name:"人文学院"  },{name:"外国语言文化学院"  },{name:"政府与公共事务学院"  },{name:"汉语国际教育中心"  },{name:"体育部"  },{name:"经济与管理学院"  },{name:"广告学院"  },{name:"文化产业管理学院"  },{name:"文化发展研究院"  },{name:"雄安新区发展研究院"  },{name:"新媒体研究院"  },{name:"互联网信息研究院"  },{name:"脑科学与智能媒体研究院"  },{name:"马克思主义学院"  },];// 边集let edges = [{source:0,target:1,value:3.5,relation: "隶属"},  //value控制线的长短{source:0,target:2,value:3.5,relation: "隶属"},{source:0,target:3,value:3.5,relation: "隶属"},{source:0,target:4,value:3.5,relation: "隶属"},{source:0,target:5,value:3.5,relation: "隶属"},{source:0,target:6,value:3.5,relation: "隶属"},{source:0,target:7,value:3.5,relation: "隶属"},{source:1,target:8,value:2,relation: "隶属"},{source:1,target:9,value:2,relation: "隶属"},{source:1,target:10,value:2,relation: "隶属"},{source:1,target:11,value:2,relation: "隶属"},{source:2,target:12,value:2,relation: "隶属"},{source:2,target:13,value:2,relation: "隶属"},{source:2,target:14,value:2,relation: "隶属"},{source:3,target:15,value:2,relation: "隶属"},{source:3,target:16,value:2,relation: "隶属"},{source:3,target:17,value:2,relation: "隶属"},{source:3,target:18,value:2,relation: "隶属"},{source:3,target:19,value:2,relation: "隶属"},{source:3,target:20,value:2,relation: "隶属"},{source:4,target:21,value:2,relation: "隶属"},{source:4,target:22,value:2,relation: "隶属"},{source:4,target:23,value:2,relation: "隶属"},{source:4,target:24,value:2,relation: "隶属"},{source:4,target:25,value:2,relation: "隶属"},{source:5,target:26,value:2,relation: "隶属"},{source:5,target:27,value:2,relation: "隶属"},{source:5,target:28,value:2,relation: "隶属"},{source:5,target:29,value:2,relation: "隶属"},{source:5,target:30,value:2,relation: "隶属"},{source:6,target:31,value:2,relation: "隶属"},{source:6,target:32,value:2,relation: "隶属"},{source:6,target:33,value:2,relation: "隶属"},{source:7,target:34,value:2,relation: "隶属"},];let colorScale = d3.scaleOrdinal().domain(d3.range(nodes.length)).range(d3.schemeTableau10);let forceSimulation = d3.forceSimulation().force("link", d3.forceLink()).force("charge", d3.forceManyBody()).force("center", d3.forceCenter());forceSimulation.nodes(nodes).on("tick", ticked);forceSimulation.force("link").links(edges).distance(function (d) {return d.value * 90;});forceSimulation.force("center").x(width / 2).y(height / 2);let links = g.append("g").selectAll("line").data(edges).enter().append("line").attr("stroke", function (d, i) {return colorScale(i);}).attr("stroke-width", 1);let linksText = g.append("g").selectAll("text").data(edges).enter().append("text").text(function (d) {return d.relation;});let gs = g.selectAll(".circleText").data(nodes).enter().append("g").attr("transform", function (d) {let cirX = d.x;let cirY = d.y;return "translate(" + cirX + "," + cirY + ")";}).call(d3.drag().on("start", started).on("drag", dragged).on("end", ended));gs.append("circle").attr("r", 10).attr("fill", function (d, i) {return colorScale(i);});gs.append("text").attr("x", -10).attr("y", -20).attr("dy", 10).text(function (d) {return d.name;});function ticked() {links.attr("x1", function (d) {return d.source.x;}).attr("y1", function (d) {return d.source.y;}).attr("x2", function (d) {return d.target.x;}).attr("y2", function (d) {return d.target.y;});linksText.attr("x", function (d) {return (d.source.x + d.target.x) / 2;}).attr("y", function (d) {return (d.source.y + d.target.y) / 2;});gs.attr("transform", function (d) {return "translate(" + d.x + "," + d.y + ")";});}function started(d) {if (!d3.event.active) {forceSimulation.alphaTarget(0.5).restart(); }d.fx = d.x;d.fy = d.y;}function dragged(d) {d.fx = d3.event.x;d.fy = d3.event.y;}function ended(d) {if (!d3.event.active) {forceSimulation.alphaTarget(0);}d.fx = null;d.fy = null;}},},
};
</script>

4. 编写直方图的js文件

代码如下：

<template><h2><a href="https://d3js.org" target="_blank" >D3直方图@VUE3</a></h2><div id="bar-chart-container"></div>
</template><script>
import { defineComponent } from 'vue';
//import axios from "axios";
import * as d3 from "d3";var data=new Array(10);
for (var i=0;i<10;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){const width=800;const height=400;var svg=d3.select("#bar-chart-container").append("svg").attr("width",width).attr("height",height);svg.selectAll("rect").data(data).enter().append("rect").attr("fill",(d,i)=>color[i]).attr("x",function(d,i){return width*i/10;}).attr("y",d=>(height-d)).attr("height",d=>d).attr("width",width*0.9/10);svg.selectAll("text").data(data).enter().append("text").attr("x",function(d,i){return 25+width*i/10;}).attr("y",d=>(height-d-10)).text(function(d,i){return d;})}}
})
</script>

三、注意事项

注意，在VUE中安装d3时，需要注意安装d3的版本，否则无法显示。

四、结果展示

总结

第一次学习VUE，项目的构建方法和以前接触过的方法完全不一样。这次尝试了将D3与VUE结构，实验效果较好，也比较顺利。能感觉到VUE的功能很强大，期待以后继续学习这方面的知识。

NodeJS+Vue3+D3相关推荐

Deepin java开发环境的搭建jdk8,tomcat9,maven3.3.9,nodejs,vue3+
Deepin java开发环境的搭建 JDK8 查看本地是否存在openjdk,有则卸载,卸载命令:sudo apt-get remove openjdk* 下载jdk包,解压到自己想要放置的目录. ...
干货丨一文带你玩转机器学习和深度学习
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学科的团队,而不是单个数据 ...
干货丨手把手带你玩转机器学习和深度学习
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学科的团队,而不是单个数据 ...
52个实用的数据可视化工具！
来源丨原力大数据从数据获得信息的最佳方式之一是,通过视觉化方式,快速抓住要点信息.另外,通过视觉化呈现数据,也揭示了令人惊奇的模式和观察结果,是不可能通过简单统计就能显而易见看到的模式和结论. 目前 ...
50款大数据分析神器：你还在用Excel
全世界只有3.14 % 的人关注了数据与算法之美你平时用什么大数据分析工具? D3? R? 还是Processing?PS和计算器... 只有你还在用excel! 工欲善其事,必先利其器!一款好的 ...
2021年Github项目Top100
2021年Github项目Top100 1. freeCodeCamp/freeCodeCamp 323k JavaScript freeCodeCamp.org's open source code ...
数据图表与分析图_史上最全最实用的数据可视化分析图表制作工具汇总
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学科的团队,而不是单个数据 ...
推荐30款最佳的数据可视化工具
各个互联网公司通过大量的用户数据.信息进行统计分析,而这些大量繁杂的数据在经过可视化工具处理后,就能以图形化的形式展现在用户面前,清晰直观.随着各种数据的增加,这种可视化工具越来越得到开发者们的欢迎. ...
最实用大数据可视化分析工具
近年来,随着云和大数据时代的来临,数据可视化产品已经不再满足于使用传统的数据可视化工具来对数据仓库中的数据抽取.归纳并简单的展现.传统的数据可视化工具仅仅将数据加以组合,通过不同的展现方式提供给用户, ...

NodeJS+Vue3+D3

文章目录

一、任务目标

二、代码实现主要部分

1. App.vue文件中加入力导向图

2. 编写力导向图的js文件

3. 编写力导向图的js文件

4. 编写直方图的js文件

三、注意事项

四、结果展示

总结

NodeJS+Vue3+D3相关推荐

最新文章

热门文章