Scale a path object after translating

Question

I've set up some code to take a path and scale and move, however it appears that once a new transform is inplace, the old one is removed? How can I move and scale a path?

var path = svg.append('path')
    .attr('d', function(d) {
        var x = 100, y = 100;
        return path;
    })
    .style("fill", "#1a5d18")
    .attr("transform", "translate(300,0)");

var path = path.attr("transform","scale(.3)");

Answer 1

As you already know, setting the new transform will override the previous one.

Let's see this in this basic demo:

const circle = d3.select("circle");
circle.attr("transform", "translate(100,50)");
circle.attr("transform","scale(.3)");

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg>
  <circle r="50"></circle>
</svg>

As you can see (actually, you cannot see!), we move the circle to 100,50, but the scale(0.3) makes the circle going back to its original position.

A possible solution is getting the previous transform value. Unfortunately, D3 v4 and v5 don't have d3.transform anymore, but it can be replaced, as explained in this answer.

However, in your specific case, you can get the previous translate value using getAttribute directly in the DOM element, and adding the scale.

Here is the demo:

const circle = d3.select("circle");
circle.attr("transform", "translate(100,50)");
circle.attr("transform", function() {
  return this.getAttribute("transform") +
    " scale(0.3)";
});

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg>
  <circle r="50"></circle>
</svg>