1

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

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

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

但是，当我尝试使用它时，它会给我一个 500 Internal Server Error document is not defined。

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

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

我该如何解决这个问题？

4

2 回答 2

1

d3.select()document.querySelector()在引擎盖下使用。由于您在服务器端工作，因此您还无权访问document。所以你需要模拟它或避免使用它。

您可以通过将元素而不是字符串传递给 来避免一起使用它d3.select()，因为它将创建一个正常运行的 d3 选择而不运行document.querySelector(). 而且由于所有其他链接.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');
于 2021-12-11T15:53:57.517 回答
0

我设法通过使用d3.selectVue 参考来解决它。

const globe = d3.select(this.$refs.globe)
于 2021-12-11T17:06:30.433 回答