Javascript 在svg中的同一级别追加两个元素

我正在使用d3.js

您好，我遇到了一个问题，即如何从相同的数据中将两个元素（路径和图像）附加到相同的g（在我的svg中）。我知道如何做到这一点，但棘手的是，我需要获得“Box”元素的Bbox值，以便将“图像”元素放在中间…我的目标实际上是在地图上的城市中心放置小云，如下所示：

在地图上它没有居中，但我必须这样做。这是我目前的代码：

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

这为我的图像获得了正确的坐标，但这是因为父节点实际上是路径。。。如果我将图像附加到g元素，是否有方法获取“BrotherNode”或“g”元素的最后一个子元素？我不知道我是否清楚，但我希望你明白我的意思

我对js有点陌生，所以可能我错过了一些简单的东西，我只是还不知道

---

感谢您的帮助

我将在

g

级别处理您的数据，并为每个地图要素（国家）创建一个组，其中包含路径和兄弟图像：

让svg=d3.select（'svg'），
mapEPCI={
特征：[100200300400]
};
设g=svg.selectAll（'g'）
.data（mapEPCI.features）
//输入选择是g的集合
让ge=g.enter（）.append（“g”）；
//根据数据为每个g追加一条路径
ge.append（'path'）
.attr（“d”、（d）=>“M”+d+”，10L“+d+”，100”）
.风格（“笔划”、“黑色”）；
//附加兄弟映像
附加（“图像”）
.attr（“xlink:href，”https://placeimg.com/20/15/animals")
.attr（“宽度”、“20”）
.attr（“高度”、“15”）
.attr（“转换”，函数（d）{
//找到我的兄弟路径以获取bbox
让sibling=this.parentNode.firstChild；
设bbox=sibling.getBBox（）；
返回“translate（“+（bbox.x-20/2）+”，“+（bbox.y+bbox.height/2-15/2）+”）
});

快来吧。我唯一的偏差是避免使用select语句

bbox=this.parentNode.firstChild.getBBox（）

@AndrewReid，偏差很好；最好使用内置JavaScript。我更新了我的代码片段。它可能只是

this.parentNode.firstChild

，而不是

this.previousSibling

。