Javascript 在甜甜圈中插入图像

我用D3js制作了各种甜甜圈图表，我需要在甜甜圈内插入一个相同的图像，但我想不出实现这一点的方法。有人能帮我吗？以下是我的JS代码：

var data1 = [4,96];
var data2 = [1,99];
var data3 = [16,84];
var data4 = [12,88];
var data5 = [29,71];
var data6 = [15,85];
var data7 = [12,88];
var data8 = [10,90];

/* Reusable Drawing donut function*/

var width = 300,
    height = 300,
    radius = (Math.min(width, height) / 2) - 100;

function drawDonut(dataa,divchart){
    var sym = "%"

    var color = ["#00338D","#BC204B"];

    var pie = d3.pie()
        .value(function(d) { return d })(dataa);

    var arc = d3.arc()
        .outerRadius(radius - 10)
        .innerRadius(radius - (radius/1.9));

    var labelArc = d3.arc()
        .outerRadius(radius - 31)
        .innerRadius(radius - 31);

    var svg = d3.select(divchart)
        .append("svg")
        .attr("width", width)
        .attr("height", height)
            .append("g")
            .attr("transform", "translate(" +60 + "," + 60 +")");

    var g = svg.selectAll("arc")
        .data(pie)
        .enter().append("g")
        .attr("class", "arc");

    g.append("path")
        .attr("d", arc)
        .data(color)
        .style("fill", function(d){return d});
    }

drawDonut(data1,"#pie1")
drawDonut(data2,"#pie2")
drawDonut(data3,"#pie3")
drawDonut(data4,"#pie4")
drawDonut(data5,"#pie5")
drawDonut(data6,"#pie6")
drawDonut(data7,"#pie7")
drawDonut(data8,"#pie8")

我要插入的图像是svg图像，代码如下：

<g>
    <path class="st0" d="M15.6,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C13.2,9.7,14.2,10.9,15.6,10.9
        L15.6,10.9z"/>
    <path class="st0" d="M18.6,11.6h-1.2l-1.8,5.5l-1.8-5.5h-1.2c-1.3,0-2.4,1.2-2.4,2.7v13h2.4l1.2,16.4h3.6l1.2-16.4H21v-13
        C21,12.8,19.9,11.6,18.6,11.6L18.6,11.6z"/>
    <path class="st0" d="M31.9,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C29.5,9.7,30.6,10.9,31.9,10.9
        L31.9,10.9z"/>
    <path class="st0" d="M39.8,25.2l-3.6-11.6c0,0-0.6-2-2.4-2h-3.6c-1.8,0-2.4,2-2.4,2l-3.6,11.6l1.2,0.7l4.2-9.5l-3.6,14.3h3.6
        l1.2,13h2.4l1.2-13H38l-3.6-14.3l4.2,9.5L39.8,25.2L39.8,25.2z"/>
</g>

你能帮我决定如何将图像插入甜甜圈图表的孔中吗？谢谢

您可以将每个d属性存储为单个常量，并使用与父级相同的组选择，在drawDonut函数中单独附加路径

然而，更简单的解决方案是将所有内容保存为单个字符串

var myGroup = '<g><path class="st0" d="M15.6,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-
    -2.7c-1.3,0-2.4,1.2-2.4,2.7...etc...-14.3l4.2,9.5L39.8,25.2L39.8,25.2z"/></g>';

警告，选择器：html方法在内部使用innerHTML。这对旧浏览器中的SVG元素不起作用。阿米莉亚·贝拉米·罗伊斯在她的书《2018年：

最新版本的web浏览器甚至支持SVG元素上的innerHTML，但这是对核心DOM规范的最新添加

为了避免在另一个组中出现不必要的组，还可以删除字符串中的and

以下是演示：

var myGroup=； VarData1=[4,96]； VarData2=[1,99]； var data3=[16,84]； VarData4=[12,88]； var data5=[29,71]； VarData6=[15,85]； VarData7=[12,88]； VarData8=[10,90]； /*可重用绘图甜甜圈功能*/ 可变宽度=100， 高度=100， 半径=数学最小宽度，高度/2； 函数drawDonutdataa，divchart{ 变量sym=% var color=[00338D，BC204B]； 变量pie=d3.pie .价值函数{ 返回d }dataa； var arc=d3.arc .外部半径-10 .内半径半径-半径/1.9； var labelArc=d3.arc .外半径-31 .内半径半径-31； var svg=d3.selectdivchart .appendsvg .宽度，宽度 .身高，身高 .附录 .attransform，translate+50+，+50+； var g=svg.selectAllarc .数据派 .enter.appendg .ATTR类，arc； g、 附录路径 .attrd，arc .datacolor .stylefill，函数{ 返回d }; g、 附加 .attransform，translate-15，-15缩放0.6 .htmlmyGroup； } drawDonutdata1，pie1 drawDonutdata2，pie2 drawDonutdata3，pie3 drawDonutdata4，pie4 图纸不包含数据5，请参见图5 drawDonutdata6，pie6 drawDonutdata7，pie7 drawDonutdata8，pie8 div{ 显示：内联； } 只需向示例中的g添加一个transform属性，该属性的值为translate200200或任何您想要的位置。

g.append("g").html(myGroup);