仅限客户端的 Nuxt 3 D3 插件

Question

我正在尝试在 Nuxt 3 项目中使用 D3 扩展，为此我在 plugins/ 目录中创建了一个 d3.client.js 文件。

import * as d3 from "d3";
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(d3)
})

但是，当我尝试使用它时，出现了 500 内部服务器错误 document is not defined。

<script>
import * as d3 from "d3";

export default {
    name: "globe",
    created() {
        d3.select("#globe");
    }
}
</script>

我该如何解决这个问题？

Answer 1

d3.select() 在后台使用 document.querySelector()。由于您在服务器端工作，因此您还没有访问 document 的权限。所以你需要模拟它或避免使用它。

您可以通过将一个元素而不是字符串传递给 d3.select() 来避免一起使用它们，因为它将创建一个没有运行 document.querySelector() 的正常运行的 d3 选择。由于每个其他链接的 .select() 或 .selectAll() 使用 previousSelection.querySelector()，您可以从那里继续。

如果您不能直接访问 DOM 元素，您可能需要模拟 document。 This article suggests using JSDOM:

import { JSDOM } from 'jsdom';

// create a new JSDOM instance for d3-selection to use
const document = new JSDOM().window.document;

d3.select(document.body)
  .append('div');

Answer 2

我设法通过使用带有 Vue 参考的 d3.select 来解决它。

const globe = d3.select(this.$refs.globe)

仅限客户端的 Nuxt 3 D3 插件

Client-only Nuxt 3 D3 plugin

d3.js

nuxt3