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

Question

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.

D3 expects HTML so you need to render Vue component into HTML 1st — Michal Levý
– Michal Levý, Commented Oct 4, 2021 at 11:00
Hi @MichalLevý, I tried you suggestion, but still not working. — BlackLotus
– BlackLotus, Commented Oct 4, 2021 at 11:12

BlackLotus · Accepted Answer · 2021-10-10 14:48:04Z

1

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

answered Oct 10, 2021 at 14:48

BlackLotus

5732 gold badges10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related