如何在vue中引入d3.js

我使用d3的原因是要用echarts的热词气泡图
下载

npm install d3 --save-dev 
或者
cnpm install d3 --save-dev 

引入

import * as d3 from 'd3';//引入d3

在这里插入图片描述

<!-- d3js 气泡图 -->
<template>
  <div id="bubble" style="width: 500px;height:500px"></div>
</template>
 
<script>
import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TooltipComponent,
  VisualMapComponent
} from 'echarts/components';
import { CustomChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  DatasetComponent,
  TooltipComponent,
  VisualMapComponent,
  CustomChart,
  CanvasRenderer
]);
import * as d3 from 'd3';
export default {
  data() {
    return {
      option: {},
      colorList: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
    };
  },
  mounted() {
    let that = this
    let seriesData = [
      {
        depth: 0,
        id: 'option',
        index: 0,
        value: 0
      },
      {
        depth: 1,
        id: 'option.dataZoom',
        index: 1,
        value: 62
      },
      {
        depth: 1,
        id: 'option.哈哈',
        index: 2,
        value: 92
      },
      {
        depth: 1,
        id: 'option.dataZoom-inside',
        index: 3,
        value: 30
      },
      {
        depth: 1,
        id: 'option.dataZoom1',
        index: 4,
        value: 40
      },
      {
        depth: 1,
        id: 'option.dataZoom2',
        index: 5,
        value: 50
        },
         {
        depth: 1,
        id: 'option.dataZoom3',
        index: 5,
        value: 60
      },
      {
        depth: 1,
        id: 'option.dataZoom4',
        index: 5,
        value: 70
      },
      {
        depth: 1,
        id: 'option.dataZoom5',
        index: 5,
        value: 80
      }
    ];
    let displayRoot = stratify1();
    function stratify1() {
      return d3
        .stratify()
        .parentId(function (d) {
 
          return d.id.substring(0, d.id.lastIndexOf('.'));
        })(seriesData)
        .sum(function (d) {
 
          return d.value || 0;
        })
        .sort(function (a, b) {
          return b.value - a.value;
        });
    }
    function overallLayout(params, api) {
 
      let context = params.context;
      d3
        .pack()
        .size([api.getWidth() - 2, api.getHeight() - 2])
        .padding(0)(displayRoot);
         context.nodes = {};
 
      displayRoot.descendants().forEach(function (node) {
 
        context.nodes[node.id] = node;
      });
    }
    function renderItem(params, api) {
      let context = params.context;
      let idx = params.dataIndex;
      
      // Only do that layout once in each time `setOption` called.
      // 每次调用“setOption”时,只能进行一次布局。
      if (!context.layout) {
        context.layout = true;
 
        overallLayout(params, api);
      }
 
      let nodePath = api.value('id');
      let nodeName = nodePath
        .slice(nodePath.lastIndexOf('.') + 1)
        .split(/(?=[A-Z][^A-Z])/g)
        .join('\n')
      let node = context.nodes[nodePath];
      if (node.id === 'option') {
        node.r = 0
      }
      if (!node) {
        // Reder nothing.
        return;
      }
 
      let z2 = api.value('depth') * 2;
      return {
        type: 'circle',
        shape: {
          cx: node.x,
          cy: node.y,
          r: node.r
        },
        // transition: ['shape'],
        z2: z2,
        textContent: {
          type: 'text',
          style: {
            // transition: isLeaf ? 'fontSize' : null,
            text: nodeName,
            fill: '#fff',
            fontFamily: 'Arial',
            width: node.r * 1.3,
            overflow: 'truncate',
            fontSize: node.r / 3
          },
          emphasis: {
            style: {
              overflow: null,
              fontSize: Math.max(node.r / 3, 12)
            }
          }
        },
        textConfig: {
          position: 'inside'
        },
        style: {
          fill: that.colorList[idx % that.colorList.length]
        },
        emphasis: {
          style: {
            fontFamily: 'Arial',
            fontSize: 12,
            shadowBlur: 20,
            shadowOffsetX: 3,
            shadowOffsetY: 5,
            shadowColor: 'rgba(0,0,0,0.3)'
          }
            }
      };
    }
    this.option = {
      dataset: {
        source: seriesData
      },
      tooltip: {},
      hoverLayerThreshold: Infinity,
      series: [{
        type: 'custom',
        colorBy: 'data',
        renderItem: renderItem,
        progressive: 0,
        coordinateSystem: 'none',
        encode: {
          tooltip: 'value',
          itemName: 'id'
        }
      }]
    }
    this.initEcharts()
  },
 
  methods: {
    initEcharts() {
      let myChart = echarts.init(document.getElementById('bubble'))
      myChart.setOption(this.option)
    }
  }
}
 
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
D3.js 是一个强大的 JavaScript 数据可视化库,而 Vue 是一个流行的 JavaScript 前端框架。它们可以很好地结合使用,以创建交互式和动态的数据可视化。 在将 D3.js 结合 Vue 使用时,有几种常见的方法可以实现: 1. 使用 Vue 的生命周期钩子函数:可以在 Vue 组件的 `mounted` 或 `updated` 钩子函数初始化和更新 D3.js 可视化。这样,在组件渲染完成后或数据更新后,可以调用 D3.js 的相关方法来绘制、更新或销毁可视化。 2. 创建自定义 Vue 指令:可以编写一个自定义指令,用于在 DOM 元素上直接调用 D3.js 的方法。这样,可以在模板使用指令来绑定数据和配置,将 D3.js 的功能封装到指令,使代码更具可维护性和复用性。 3. 使用第三方插件或库:有一些第三方插件或库可以帮助更好地结合 D3.jsVue。例如,`vue-d3` 是一个专门为 D3.jsVue 设计的插件,提供了一些方便的组件和指令,简化了 D3.jsVue 的集成过程。 无论选择哪种方法,重要的是要确保良好的数据流和交互机制。使用 Vue 的响应式数据和事件系统,可以实现数据的双向绑定、动态更新和交互操作,以提供更丰富的用户体验。 需要注意的是,D3.jsVue 在处理 DOM 和数据方面有不同的思维方式和方法,因此在结合使用时,需要理解和熟悉两者的工作原理,并根据具体需求进行适当的调整和优化。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值