D3 labels issue in zoomable scatter plot

Question

Here is the problem I got. When you drag or zoom in, the labels are not moving

The error:

Uncaught TypeError: Cannot read property 'x' of undefined

which corresponds to the last line.

  function zoom() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);

    svg.selectAll(".dot")
        .attr("transform", transform);

    svg.selectAll("text")
        .attr("transform", transform);
  }

  function transform(d) {
    return "translate(" + x(d.x) + "," + y(d.y) + ")";
  }

Answer 1

When you do this...

svg.selectAll("text")

... you're selecting all the text elements in that SVG, and some of those texts have no bound data.

Solution: give them a class (for instance, .text ) and select by that class:

svg.selectAll(".text")
    .attr("transform", transform);

Here is your updated fiddle: https://jsfiddle.net/zoy0cxwq/