Graph are not drawn in nuxt3

I’m trying to use d3-graphviz with nuxt3. Here is the code I wrote.

<script setup lang="ts">
import * as d3 from 'd3'
import { onMounted, ref } from 'vue';
import { Graphviz, graphviz } from 'd3-graphviz';

const graphSvg = ref<HTMLDivElement>();
let graph: Graphviz<any, any, any, any>;

const render = () => {
  graph = graphviz(graphSvg.value as HTMLDivElement, {
    useWorker: false,
    width: 1000,
  })
      .dot(`digraph {a -> b}`)
      .render()
}

onMounted(async () => {
  render()

  setTimeout(() => {
    console.log('mounted rendered', graph)
  }, 3000)

  graph.onerror((errorMessage) => {
    console.log('graph vis error', errorMessage)
  })
});
</script>

<template>
  <div class="graph" ref="graphSvg" />
</template>

<style scoped>
.graph {
  min-height: 500px;
}
</style>

Here is what I have confirmed.

• The defined variables are correctly assigned values and the console.log result after render returns the following
  • mounted rendered Graphviz {_options: {…}, _selection: Selection, _active: false, _busy: true, _jobs: Array(0), …}
• I put a breakpoint in node_modules/d3-graphviz/src/redner.js:16 in Chrome DevTools, and it stops here
  • 
• It worked fine when I wrote other d3 methods within my render function (e.g., drawing a simple straight line)

  d3.select(graphSvg.value as HTMLDivElement)
    .append("svg")
    .append("line")
    .attr("x1", 20)
    .attr("y1", 5)
    .attr("x2", 300)
    .attr("y2", 200)
    .attr("stroke", "red")
  

I am concerned that _busy in the graphViz object is still true after waiting 3 seconds. Is this correct behavior?

Sorry if nuxt3 support should not be discussed here.

Thanks for your help.

[nicolidin]

@murawakimitsuhiro I’ve got the same issue with vue3 (not nuxt) and your code fixed it, thanks !

[murawakimitsuhiro]

I have solved this problem. Finally, I was able to get it to work by referencing your angular project and specifying the wasmFolder. https://github.com/magjac/d3-graphviz-angular

my code is here. https://github.com/murawakimitsuhiro/exgraph/blob/main/components/DotGraph.vue

I guess it seems to occur when some module bundler is used. Should I add this to the README and create a PR? Also, do you have any good solutions?