关于Vue3使用D3Js的一点记录

zhyp2025年10月20日大约 3 分钟

关于Vue+vite使用D3Js的一点记录

1.安装D3.js

npm v9.6.7
node.js v18.17.0
vue v3.3.10

安装阶段出现了依赖不完整问题：使用 pnpm 或 cnpm 时，部分子包未被完整拉取。其中 d3-contour 依赖在部分安装方式下可能缺失，改用 npm 重新安装后可恢复完整依赖。

import * as d3 from 'd3';
import 'd3-contour';

引入相关依赖包

 <div ref="svgContainerRef"></div>

设置一个容器放置生成的SVG

const drawContour = function () {
  const n = data.width;
  const m = data.height;
  const width = 928;
  const height = Math.round(m / n * width);
  const path = d3.geoPath().projection(d3.geoIdentity().scale(width / n));
  const contours = d3.contours().size([n, m]);
  const color = d3.scaleSequential(d3.interpolateTurbo).domain(d3.extent(data.values)).nice();

  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .attr("style", "max-width: 100%; height: auto;");

  svg.append("g")
    .attr("stroke", "black")
    .selectAll()
    .data(color.ticks(20))
    .join("path")
    .attr("d", d => path(contours.contour(data.values, d)))
    .attr("fill", color);

  return svg.node();
}

生成图

当前图形可读性尚可，但视觉层次仍有优化空间。

当前图形表达偏基础，建议通过颜色分段与图例强化信息层次。

使用Plot重新生成.

2.Plot

2.1 What is Plot

先看官方示例界面：

官方文档偏英文语境，初次接入时理解成本相对较高。

D3团队基于D3.js的新工具

安装plot

npm install @observablehq/plot

import * as Plot from "@observablehq/plot"

引入依赖

<div ref="controlRef"></div>

容器，放置图片

const setcontrol = function () {
  const plotDom = Plot.plot({
    color: {
      legend: true,
      label: "Elevation (m)"
    },
    marks: [
      Plot.contour(data.values, {
        width: data.width,
        height: data.height,
        fill: Plot.identity,
        stroke: "black"
      })
    ]
  })
  controlRef.value?.appendChild(plotDom);
}