如何在Svelte中渲染D3.js创建的div节点？

问题根源 #

1. {@html}的使用误区：Svelte的{@html}指令仅接受HTML字符串作为输入，但你传入的是D3创建的HTMLDivElement对象，对象被强制转为字符串后就显示成了[object HTMLDivElement]。
2. getData函数的异步错误：fetch的回调中，d.json()是异步操作，你直接把它传给tabulate，导致tabulate拿到的是Promise而非实际数据，这会让D3的渲染逻辑根本无法正确执行。

解决方案 #

方案一：将DOM元素转为HTML字符串（快速修复）

修改getData函数，把D3生成的DOM元素转成HTML字符串后返回，这样{@html}就能正确解析：

async function getData() {
    // 先正确获取并解析数据
    const res = await fetch("path");
    const data = await res.json();
    // 生成D3节点
    const divNode = tabulate(data, ['col', 'col2']);
    // 把DOM元素转为完整的HTML字符串
    return divNode.outerHTML;
}
let fetched = getData();

模板部分保持不变，{@html result}会直接渲染生成的表格HTML。

方案二：预先创建Svelte容器，让D3直接渲染到容器中（推荐实践）

这种方式更符合Svelte的组件生命周期，也便于后续维护和交互：

1. 模板中添加容器：

<div>
    {#await fetched}
        <p>...waiting</p>
    {:then data}
        <!-- 绑定容器到变量，供D3选择 -->
        <div bind:this={tableContainer}></div>
    {/await}
</div>

2. 脚本中处理渲染逻辑：

import * as d3 from 'd3';

let tableContainer;
// 修正getData，仅返回解析后的数据
async function getData() {
    const res = await fetch("path");
    return res.json();
}
let fetched = getData();

// 当容器存在且数据加载完成时，触发D3渲染
$: if (tableContainer && $fetched) {
    // 先清空容器，避免重复渲染
    d3.select(tableContainer).html('');
    // 调用修改后的tabulate函数，传入容器
    tabulate($fetched, ['col', 'col2'], tableContainer);
}

// 修改tabulate函数，支持传入已有容器
function tabulate(data, columns, container) {
    // 如果传入容器则直接选择，否则创建新div（保持原有兼容性）
    const target = container ? d3.select(container) : d3.create("div");
    
    let table = target.append('table')
    let thead = table.append('thead')
    let tbody = table.append('tbody');

    // 表头逻辑
    thead.append('tr')
        .selectAll('th')
        .data(columns).enter()
        .append('th')
        .text(column => column);

    // 表身逻辑
    const rows = tbody.selectAll('tr')
        .data(data)
        .enter()
        .append('tr');

    rows.selectAll('td')
        .data(row => columns.map(column => ({ column, value: row[column] })))
        .enter()
        .append('td')
        .text(d => d.value);
}

补充说明 #

你提到“选择已存在的div时能正常工作”，正是因为方案二的思路就是让D3操作Svelte已经创建好的DOM元素，而非生成独立的DOM节点再试图插入，这种方式更贴合Svelte的DOM管理机制。

内容的提问来源于stack exchange，提问作者Olli