项目地址:https://observablehq.com/@unkleho/covid-19-bubble-chart-with-d3-render
GitHub地址:https://github.com/unkleho/d3-render
要想实现这个项目的话,首先需要安装Node.js以及npm,具体的安装步骤自行百度,还是比较简单的。
接下来就可以安装Vue.js及Vue脚手架3.0。
所以要想鼓捣一些高大上的可视化,前端的学习是必不可少的,默默的流下没有技术的泪水。
# 安装Vue.jsnpm install vue# 安装Vue-cli3脚手架npm install -g @vue/cli
如此便可以创建项目了。
# 创建名为bubblechart的项目vue create bubblechart
结果如下,选择默认模式即可。
由于里面有eslint(编码规范)的存在,记得在配置文件package.json中添加下面的代码。
"rules": {
"no-unused-vars": "off", "no-undef": "off"}
要不然会出现报错,无法运行。
项目创建成功后,修改App.vue文件内容如下。
<template> <div id="app"> <svg id="bubble-chart" width="954" height="450" /> div>template><script>export default {
name: 'App', components: {
}}script><style>style>
保存成功后,打开bubblechart文件夹下的终端,运行下面这个命令。
npm run serve
浏览器便会跳出一个标题为bubblechart的空白网页。
安装一些项目依赖d3,d3-render,d3-selection,d3-transition,axios。
npm install d3@5.16.0 --save-devnpm install d3-render@0.2.4 --save-devnpm install d3-selection@1.4.2 --save-devnpm install d3-transition@2.0.0 --save-devnpm install axios --save-dev
最好是指定版本,要不然可能会报错。
在main.js文件中引用axios,用于请求数据。
import axios from 'axios'Vue.prototype.$axios = axios
在App.vue的script标签中引用d3,d3-render。
import * as d3 from "d3";import render from "d3-render";
设置初始数据,各式各样的气泡颜色。
data() {
return {
covidData: null, countries: null, colours: {
pink: "#D8352A", red: "#D8352A", blue: "#48509E", green: "#02A371", yellow: "#F5A623", hyperGreen: "#19C992", purple: "#B1B4DA", orange: "#F6E7AD",