score:1

Accepted answer

The problem here is this line:

 var layer = svg.selectAll(".layer")

The first time you run changePangolin there is no element with a class layer, and the path is appended as expected. However, from the second time on, as there is already an element with a class named "layer" in the DOM, your "enter" selection will be always empty.

Solution:

Append your path outside the changePangolin function:

var layer = svg.append("path")
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("stroke-width", "2px");;

And, inside changePangolin, simply change it:

layer.transition(t)
    .attr("d", area(newdata.data))

Related Query