在 D3.js v7 中动态使用 Vue.js 3 组件

Question

我正在使用 Vue.js 3 和 D3.js v7 制作流程图。

我的问题是我 无法在 D3.js 中动态附加组件。

我的组件导入如下所示。

components: {
    StoryPanel: defineAsyncComponent(() => import("@/Pages/Story/Partials/StoryPanel"))
},

let nodes = container.selectAll("g")
    .data(root.descendants())
    .join("g")

    .append("foreignObject")
    .attr("width", entityWidth - 10)
    .attr("height", 150)

nodes.append("xhtml:div")
    .attr("class", "border border-black")
    .html(function (d) {
        // return '<StoryPanel />' tried this but not working
    })
    .style("border", '1px solid black')

这是生成的html

<foreignObject width="190" height="150" transform="translate(-95,10)">
    <div class="border border-black" style="border: 1px solid black;">
        <storypanel></storypanel>
    </div>
</foreignObject>

[编辑 1] 按照@MichalLevý 的建议尝试了 Rendering Vue 3 component into HTML string，但仍然无法正常工作

.html(function (d) {
    const tempApp = createApp({
        render() {
            return h(StoryPanel,{step: d})
        }
    })

    const el = document.createElement('div');
    const mountedApp = tempApp.mount(el)

    return mountedApp.$el.outerHTML
})

[编辑 2] 我发现它仅在使用 const 而不是 Component.vue

时有效

const CircleWithTextSvg = {
    name: 'CircleWithTextSvg',
    props: {
        text: {
            type: String,
            default: "1"
        },
        fill: {
            type: String,
            default: "white"
        }
    },
    template: `<div>template</div>`
}

感谢任何帮助。谢谢。

Answer 1

使用createApp

import {createApp} from 'vue';

并改用它和 return outerHTML

const app = createApp(Component, {prop1: this.prop1})
    .mount(document.createElement('div'))
return app.$el.outerHTML

在 D3.js v7 中动态使用 Vue.js 3 组件

Using Vue.js 3 component dynamically in the D3.js v7

d3.js

vuejs3