Nuxt项目中如何让外部JS文件正常使用d3-selection-multi的attrs方法？

故障复现 #

• Vue页面<script>标签内的导入逻辑：

import * as d3 from "d3";
import "d3-selection-multi";
import CreateGrid from "@/assets/javascript/transformations/Grid";

• 运行时报错：在Grid.js文件中执行grid.append(...).attrs()时，抛出grid.append(...).attrs 不是函数
• 已尝试的修复操作：
  在nuxt.config.js的head配置中引入本地静态资源：

  head: {
    script: [
      {
        src: "/js/d3-selection-multi.v1.min.js",
      },
    ]
  }
  

  且已确认d3-selection-multi.v1.min.js文件已放置在static/js目录下，报错依然存在。

问题根因 #

• 依赖隔离导致扩展失效：通过npm安装的d3是ES模块独立实例，d3-selection-multi的默认扩展逻辑是查找全局作用域的d3对象做原型挂载。单纯执行无值导入import "d3-selection-multi"时，在ES模块的封闭作用域下根本找不到当前文件中import进来的d3实例，自然不会把attrs方法挂载到对应的原型链上。
• 多实例不匹配：把本地JS放在static下通过head script引入的方式，扩展逻辑只会作用于全局window上挂载的d3对象，但项目里使用的是npm包导入的d3，这两个是完全独立的实例，就算全局对象上扩展了attrs方法，模块作用域内的d3选择器链上依然没有这个方法。
• 执行时序问题：Nuxt是同构渲染框架，head配置的外部脚本在服务端渲染阶段不会执行；就算到了客户端阶段，也可能出现组件逻辑执行早于外部脚本加载完成的情况，导致扩展逻辑还没生效就已经触发了方法调用。

可落地修复方案 #

方案1：手动挂载扩展方法（轻量稳定，无需改全局结构） #

不要依赖插件自动查找全局对象的逻辑，手动把d3的选择器原型传给扩展函数即可：

• 在所有需要使用attrs方法的文件（比如Grid.js）开头，替换原有导入逻辑：

  import * as d3 from "d3";
  import { selection } from "d3-selection";
  // 导入d3-selection-multi的扩展函数
  import multi from "d3-selection-multi";
  // 把扩展方法挂到当前模块的d3选择器原型上
  multi(selection.prototype);
  

• 删掉nuxt.config.js里所有之前添加的d3-selection-multi静态script引入，避免产生多实例冲突。
• 校验依赖版本：确认安装的d3-selection-multi为v1.x版本，和当前项目使用的d3 v4/v5 API兼容，不要安装不匹配的高版本。

方案2：封装Nuxt插件统一初始化（适合多文件用到d3的项目） #

如果项目内多个组件、工具文件都要用到扩展后的d3实例，可以把初始化逻辑封装成Nuxt插件，统一在客户端环境下执行：

1. 在项目plugins目录下新建d3-client.js文件：

   import * as d3 from "d3";
   import { selection } from "d3-selection";
   import multi from "d3-selection-multi";
   
   // 执行原型方法扩展
   multi(selection.prototype);
   
   // 把扩展完成的d3实例注入到Nuxt全局上下文，所有组件、工具文件共享同一个实例
   export default (context, inject) => {
     inject("d3", d3);
   }
   

2. 在nuxt.config.js中注册插件，因d3的DOM操作逻辑仅需在客户端执行，配置为客户端模式避免服务端渲染报错：

   plugins: [
     { src: "@/plugins/d3-client.js", mode: "client" }
   ]
   

3. 全局移除之前所有在head中配置的d3相关静态外部脚本，从根源上避免多实例冲突。

注意：所有涉及d3选择器、attrs方法调用的代码，都要放在客户端生命周期钩子（比如mounted、client-only组件）中执行，不要在服务端环境下操作DOM。

内容的提问来源于stack exchange，提问作者Family