无法在D3 Vue3中将创建的SVG追加到div

qoefvg9y 于 9个月前发布在其他

关注(0)|答案(1)|浏览(63)

这是我的SFC
我评论了工作得很好和不工作得很好的部分

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

获取错误Uncaught DOMException: String contains an invalid character
ps：keywords > len 3 -shouldn 't exist --请不要费心去注意它
看起来你的帖子大部分都是代码;请补充一些细节。
真的很傻，不用多说就很明显了~_~

d3.js

来源：https://stackoverflow.com/questions/75458655/cant-append-created-svg-to-div-in-d3-vue3

1条答案

按热度按时间

j7dteeu81#

GPT-3做的工作

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

赞(0）回复(0）举报 9个月前

我来回答

无法在D3 Vue3中将创建的SVG追加到div

1条答案

相关问题

热门标签

最新问答