d3.js 仅用于客户端的Nuxt 3 D3插件

y0u0uwnf 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(273)

我尝试在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>

我该如何解决这个问题？

d3.js

来源：https://stackoverflow.com/questions/70316478/client-only-nuxt-3-d3-plugin

2条答案

按热度按时间

crcmnpdw1#

d3.select()在幕后使用document.querySelector()。由于您在服务器端工作，因此还不能访问document。因此，您需要模拟它或避免使用它。
通过向d3.select()传递一个元素而不是一个字符串，可以避免同时使用所有这些元素，因为这样会创建一个功能正常的d3选择，而无需运行document.querySelector()。由于其他链接的.select()或.selectAll()都使用previousSelection.querySelector()，因此可以从那里继续。
如果您无法直接访问DOM元素，则可能需要模拟document。This article建议使用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');

赞(0）回复(0）举报 2022-11-12

ztmd8pv52#

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

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

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js 仅用于客户端的Nuxt 3 D3插件

2条答案

相关问题

热门标签

最新问答