在 Svelte 中渲染使用 d3.js 創建的 div 節點？

Question

我在 d3.js 中創建了一個表，並將其作為div.node()返回，我正在嘗試將其渲染為苗條。 它是用獲取的數據創建的，所以我將它包裝在一個 sveltes 異步等待語法中：

<div>
    {#await fetched}
    <p>...waiting</p>
    {:then result}
        {@html result}
    {/await}
</div>

其中 fetched 是以下結果：

function getData() 
    {
        return fetch("path").then(d => tabulate(d.json(), ['col', 'col2']));
    }
    let fetched = getData();

但是，頁面上返回的是[object HTMLDivElement]而不是實際的表格。 文檔說它需要是獨立的 HTML，我將它呈現在一個文件中並且它可以工作。 我應該先在 svelte 中創建元素，然后再創建 select 它嗎？ 如果我 select 是一個預先存在的 div，它就可以工作。

隨附的 d3.js function 完全歸功於jfreels ：

    function tabulate(data, columns) {
        const div = d3.create("div")
        
        let table = div.append('table')
        let thead = table.append('thead')
        let tbody = table.append('tbody');

        // append the header row
        thead.append('tr')
        .selectAll('th')
        .data(columns).enter()
        .append('th')
            .text(function (column) { return column; });

        // create a row for each object in the data
        let rows = tbody.selectAll('tr')
        .data(data)
        .enter()
        .append('tr');

        // create a cell in each row for each column
        let cells = rows.selectAll('td')
        .data(function (row) {
            return columns.map(function (column) {
            return {column: column, value: row[column]};
            });
        })
        .enter()
        .append('td')
            .text(function (d) { return d.value; });

        return div.node();
}

Answer 1

object 是 DOM 元素，而不是 HTML； 但是由於它已經是一個功能齊全的元素，所以沒有必要將它寫成 HTML 並讓瀏覽器重新解析它。 正如 Corrl 所指出的，這也會導致所有事件偵聽器丟失。

您可以使用例如操作輕松附加節點：

const append = (node, child) => node.append(child);

<div>
    {#await fetched}
        <p>...waiting</p>
    {:then result}
        <div use:append={result} />
    {/await}
</div>