axios vue 动态date_可视化：动态气泡图，拿走不谢！

作者 | 小F 来源 | 法纳斯特(ID：walker398 ) 头图 |  CSDN 下载自东方IC 本期给大家分享一个用D3.js实现的动态气泡图案例。 也是之前小F了解D3.js时发现的，效果大致如下。

项目地址：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 [email protected] --save-devnpm install [email protected] --save-devnpm install [email protected] --save-devnpm install [email protected] --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,      col