Can't append created SVG to div in D3 Vue3 - d3.js

Question

here is my SFC
i commented on the part that works well and doesn't work as well
<template lang="pug">
.d3_simple
h1 My D3 Vue3 Example
svg(ref='svg_ref')
hr
div(ref='div_ref')
</template>
<script setup>
import { onMounted, ref } from 'vue'
import * as d3 from 'd3'
var svg_ref = $ref( null )
var div_ref = $ref( null )
// working
function d3_svg_ref()
{
d3.select( svg_ref )
.append( 'circle' )
.attr( 'cx', 50 )
.attr( 'cy', 50 )
.attr( 'r', 25 )
.style( 'fill', '#6fff00' )
}
// not working
function d3_div_ref()
{
var svg = d3.create( 'svg' )
.append( 'circle' )
.attr( 'cx', 50 )
.attr( 'cy', 50 )
.attr( 'r', 50 )
.style( 'fill', '#ffb300' )
d3.select( div_ref ).append( svg )
}
onMounted(
() =>
{
d3_svg_ref()
d3_div_ref()
}
)
</script>
getting an error Uncaught DOMException: String contains an invalid character
ps: keywords > len 3 - shouldn't exist -- please don't bother to notice it
It looks like your post is mostly code; please add some more details.
it's really silly, issue is pretty obvious without much talking ~_~

Answer 1

GPT-3 do the job
function gpt_fix1()
{
var svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" )
d3.select( svg )
.append( 'circle' )
.attr( 'cx', 50 )
.attr( 'cy', 50 )
.attr( 'r', 25 )
.style( 'fill', '#ffb300' )
d3.select( div_ref ).node().appendChild( svg )
}
function gpt_fix2()
{
var svg = d3.create( 'svg' )
svg.append( 'circle' ) // w/o "svg." not working
.attr( 'cx', 50 )
.attr( 'cy', 50 )
.attr( 'r', 25 )
.style( 'fill', '#4400ff' )
d3.select( div_ref ).html( svg.node().outerHTML )
}
function gpt_fix3()
{
var svg = d3.select( div_ref ).append( 'svg' )
svg.append( 'circle' ) // "svg." is a key
.attr( 'cx', 50 )
.attr( 'cy', 50 )
.attr( 'r', 25 )
.style( 'fill', '#00ccff' )
}