仅限客户端的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

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

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

Answer 2

d3.select()在引擎盖下使用document.querySelector()。由于您在服务器端工作，您还没有访问document的权限。所以你需要嘲笑它或者避免使用它

您可以通过向d3.select()传递一个元素而不是字符串来避免将其全部使用，因为它将在不运行document.querySelector()的情况下创建一个有效的d3选择。由于每隔一个链接的.select()或.selectAll()都使用previousSelection.querySelector()，因此您可以从那里继续。

如果您没有直接访问DOM元素的权限，则可能需要模拟document。本文建议使用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');