Клиентский плагин Nuxt 3 D3

Question

Я пытаюсь использовать расширение D3 в проекте Nuxt 3, и для этого я создал d3.client.js файл в plugins/ каталог.

      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со ссылкой на Vue.

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

Answer 2

используется под капотом. Поскольку вы работаете на стороне сервера, у вас еще нет доступа. Поэтому вам нужно издеваться над ним или избегать его использования.

Вы можете избежать использования всего этого вместе, передав элемент вместо строки в 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');