score:1

Accepted answer

You can simply put the image and text in a group container and adjust the text position relatively as shown below.

Plunker

const svg = d3.select("body")
  .append("svg")
  .attr("width", 1000)
  .attr("height", 1000);

var widthMarker = 50;

var imgContainer = svg.append("g")
  .attr("transform", "translate(228,53)");

var img = imgContainer.append("svg:image")
  .attr("xlink:href", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgfLDf_0gBVxWp_7ec2UR3Dro5rBXquElgRdSH6K8LQQ7QanSQ")
  .attr("width", widthMarker)
  .attr("height", widthMarker);

var text = imgContainer.append("svg:text")
  .attr("dy", widthMarker/2)
  .text("hello world");

text.attr("dx", (widthMarker - text.node().getComputedTextLength()) / 2);
<script src="https://d3js.org/d3.v3.min.js"></script>


Related Query

More Query from same tag