Rotate D3 symbol

Question

I'm rendering a d3 symbol that looks like this:

svg.append('path')
    .attr("d", d3.svg.symbol().type("triangle-up").size(10))
    .attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; })
    .style("fill", "red")

I'd like to rotate this triangle so that the triangle points left <|. How can I rotate this symbol while keeping it at the same position in my viz? I've been trying to do the following, but the symbol moves to the upper left corner of my viz (it doesn't stay in the position created by the transformation):

svg.append('path')
    .attr("d", d3.svg.symbol().type("triangle-up").size(10))
    .attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; })   
    .attr("transform", "rotate(-45)")
    .style("fill", "red")

Answer 1

The problem is that the second call to set transform overrides the first value here:

.attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; })   
.attr("transform", "rotate(-45)") // Only this value will remain as the value of the attr

To fix it, you should append the rotation to the original value of transform:

.attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ") rotate(-45)"; })   

Another solution is to put the symbol in nested g elements and apply individual transforms to each of them, example.