vue3中使用d3

前置条件与事先说明

• 已创建好了一个vue3项目(本文已TS为基础语法)
• 目标是通过按需引入的方式引入d3, 而非全量引入

d3相关依赖安装

pnpm install d3-selection d3-array d3-axis d3-color d3-ease d3-axis d3-scale
pnpm install @types/d3-selection @types/d3-array @types/d3-axis @types/d3-color @types/d3-ease @types/d3-axis @types/d3-scale -D

简单使用d3-selection示例

<!--
@author: pan
-->

<script lang="ts" setup>
import { onMounted } from 'vue'
import { selectAll, select } from 'd3-selection'
onMounted(() => {
  const selection = selectAll('p:first-child')
  // selection.datum('你好')
  selection.data(['你好', '世界', '疯狂了'])
  selection.text((oneData: any, idx: number) => {
    return `第${idx}个数据是:${oneData}`
  })
  selection.style('color', 'red').style('font-size', '20px')
  console.log(selection)
})
</script>

<template>
  <p class="demo-01-p">第一个p</p>
  <p class="demo-01-p">第二个p</p>
  <h3>D3 Demo01</h3>
</template>

<style lang="scss" scoped></style>

相关文章

d3中文文档