旋轉D3符號

Question

我渲染D3符號，看起來像這樣：

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

我想，這樣的三角點離開<|旋轉這個三角形。我怎樣才能旋轉這個符號，同時保持它在我的位置相同的位置？我一直在努力做到以下幾點，但符號移動到我的即左上角（它不會停留在通過轉換創建的位置）：

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

的問題是，第二打電話約定transform覆蓋這裏的第一個值：

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

要解決它，你應該旋轉追加到的transform原值：

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

另一個SOLU將symbol放入嵌套的g元素中，並將各個變換應用於它們中的每一個，即example。