我正在嘗試在 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>
我該如何解決這個問題？
uj5u.com熱心網友回復：
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');
uj5u.com熱心網友回復：
我設法通過使用d3.selectVue 參考來解決它。
const globe = d3.select(this.$refs.globe)
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/382612.html
上一篇：在D3.js矩形中有文本