im using the Vue.js 3 and D3.js v7 to making the flowchart.

My problem here is I can't dynamically append the component inside the D3.js.

My component is imported like shown below.

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')

This is the generated html

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

[Edit 1] Tried this Rendering Vue 3 component into HTML string as @MichalLevý suggested, but still not working

.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
})

[Edit 2] I found it works only when using const instead of a Component.vue

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

Any help is appreciated. Thank you.

CodePudding user response：

Use createApp

import {createApp} from 'vue';

and use this instead and return the outerHTML

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