Why are the text labels in d3 transforming to zero on pan/zoom?

I’m fairly new at d3 and I’ve built the code from a couple of sources so it’s probably just that I have it initializing incorrectly but I’m not seeing what it is. The page I’m building dynamically fetches geojson from a database and renders a simple map with a label. This works correctly but whe I added code to give the map zoom/pan functionality the map behaves correctly but the transform on the text moves the label to 0 postition with the <g> element and I’m not sure why? When I zoom in the map and text increases in size as expected but the text position stays at 0/0.

Instead of dumping a lot of code here I’ve put together this fiddle so that it could easily be seen and tested.

I think that anyone more familiar with d3 probably knows what I’ve got wrong here. I would sure appreciate someone pointing it out to me. Thanks

Answer

See your problem saved in the fiddle:

const items = g.selectAll('g.item')
  .data(bb.features)
  .enter()
  .append('g')
  .classed('item', true);

items.append('path').attr(...)

items.append('text').attr(...)

Instead of entering path and text elements separately, enter a g container and then append path and text under the g.

Leave a Reply

Your email address will not be published. Required fields are marked *