score:2

I would handle your data at the g level and create a group for every map feature (country) which contains the path and a sibling image:

<!doctype html>

<html>

<head>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>

<body>
  <svg width="600" height="600"></svg>
  <script>
    let svg = d3.select('svg'),
      mapEPCI = {
        features: [100, 200, 300, 400]
      };

    let g = svg.selectAll('g')
      .data(mapEPCI.features)

    // enter selection is collection of g
    let ge = g.enter().append("g");

    // append a path to each g according to data
    ge.append('path')
      .attr("d", (d) => "M" + d + ",10L" + d + ",100")
      .style("stroke", "black");

    // append a sibling image
    ge.append("image")
      .attr("xlink:href", "https://placeimg.com/20/15/animals")
      .attr("width", "20")
      .attr("height", "15")
      .attr("transform", function(d) {
        // find my sibling path to get bbox
        let sibling = this.parentNode.firstChild;
        let bbox = sibling.getBBox();
        return "translate(" + (bbox.x - 20 / 2) + "," + (bbox.y + bbox.height / 2 - 15 / 2) + ")"
      });
  </script>
</body>

</html>


Related Query

More Query from same tag