Почему d3-selection не может найти документ? Это связано с Astro?

Question

Я использую v7.6.1 D3.js. Я тоже пользуюсь Астро. Я написал этот код:

      var margin = {top: 20, right: 30, bottom: 40, left: 90}, width = 460 - margin.left - margin.right, height = 400 - margin.top - margin.bottom;

d3.select("div")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.top)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("./data.json", function (data) {
    console.log(data);
});

Но всякий раз, когда я пытаюсь запустить его в среде разработчика, он выдает эту ошибку:

      file:///D:/thatheatedcoin/node_modules/d3-selection/src/select.js:5
      ? new Selection([[document.querySelector(selector)]], [document.documentElement])
                        ^

ReferenceError: document is not defined
    at Proxy.default (file:///D:/thatheatedcoin/node_modules/d3-selection/src/select.js:5:25)
    at eval (/src/components/viz.astro:17:25)
    at renderToIterable (/node_modules/astro/dist/runtime/server/index.js:463:27)
    at renderAstroComponentInline (/node_modules/astro/dist/runtime/server/index.js:132:28)
    at renderAstroComponentInline.next (<anonymous>)
    at _render (/node_modules/astro/dist/runtime/server/index.js:41:5)
    at async AstroComponent.[Symbol.asyncIterator] (/node_modules/astro/dist/runtime/server/index.js:60:7)
    at async renderAstroComponent (/node_modules/astro/dist/runtime/server/index.js:563:20)
    at async _render (/node_modules/astro/dist/runtime/server/index.js:39:5)
    at async _render (/node_modules/astro/dist/runtime/server/index.js:34:5)
error Command failed with exit code 1.

Может ли это быть связано с Астрономией? Если нет, то чем это вызвано? Спасибо!

Answer 1

Клиентская часть D3

Astro — это фреймворк генератора на стороне сервера, поэтому код в его переднем плане---работает на сервере, и только код в теле внутри тега выполняется на клиенте, там доступны окно и документ

см. также аналогичный вопрос, а не этот ответ с простым<script>тег, так как больше атрибутов не требуется. Как использовать элемент документа и окна в astro JS?

      ---
//Astro Front matter => runs on server only
---
<script>
    //here use document and use d3
</script>

Серверная часть D3

Это тоже возможно, но тогда все происходит без использования ни окна, ни документа, а генерация предоставляет svg, но для интерактивности вам нужно добавить клиентский js. см. Как использовать D3js на стороне сервера для прямого создания SVG?