score:2

Accepted answer

A proper indentation will help here:

d3.selectAll(".move")
  .on("click", function() {
    d3.select(this)
      .classed("hasmoved", true)
      .style("fill", "rgba(48,63,43,0.5)")
      .attr("transform", 'translate(700)')
  });

d3.selectAll(".hasmoved")
  .on("click", function() {
    d3.select(this)
      .style("fill", "pink")
  });

As we can see, the d3.selectAll(".hasmoved").on(//etc... block is outside the first on method. Therefore, that block will run immediately, in a moment when there is no hasmoved class anywhere, since the user has not clicked anything yet.

The easier solution is just setting the on method to each clicked element:

d3.selectAll(".move")
  .on("click", function() {
    d3.select(this)
      .classed("hasmoved", true)
      .style("fill", "rgba(48,63,43,0.5)")
      .attr("transform", 'translate(700)')
      .on("click", function() {
        d3.select(this)
          .style("fill", "pink")
      });
  });

Related Query