D3.js：SVG同一g层级下基于同份数据并列追加path、image并通过BBox定位

具体开发需求 #

正在用D3.js开展地图可视化开发，要求基于同一份地理数据，将两类元素统一挂载到SVG内部的同一个<g>容器下：

• 第一类是绘制城市行政区块的path元素
• 第二类是用于标识空气治理计划的云朵图案image元素

两类元素必须是同级的兄弟节点，最终要实现的展示效果和参考图一致：

要实现图标精准居中的核心前提，是必须先获取对应path元素的边界盒（BBox）数值，才能把image对齐到区块的几何中心。

现有实现的问题 #

目前写出的代码虽然能够计算出图标的正确定位坐标，但实现逻辑是把image元素嵌套在了对应的path元素内部，完全不符合预期的层级结构要求：

// Draw the map
svg.append("g")
    .selectAll("path")
    .data(mapEPCI.features)
    .enter()
    .append("path")
    .attr("fill", d => d.properties.color)
    .attr("d", d3.geoPath().projection(projection))
    .style("stroke", "white")
    .append("image")
        .attr("xlink:href", function(d) {
            if (d.properties.plan_air == 1)
                return ("data/page8_territoires/cloud.png")
            else if (d.properties.plan_air == 2)
                return ("data/page8_territoires/cloudgray.png")
        })
        .attr("width", "20")
        .attr("height", "15")
        .attr("x", function (d) {
            let bbox = d3.select(this.parentNode).node().getBBox();
            return bbox.x + 30})
        .attr("y", function (d) {
            return d3.select(this.parentNode).node().getBBox().y + 30})

待解决的技术卡点 #

现在希望把image元素直接追加到外层的<g>容器下，和对应的path成为同级兄弟节点，但目前搞不清楚怎么建立两类元素的关联，没法在创建image节点时拿到对应path的BBox值完成精准定位。
作为JavaScript开发新手，对这类DOM节点关联的基础实现逻辑不熟悉，需要可落地的实现方案指导。

内容的提问来源于stack exchange，提问作者bounim