回し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

問題が二点です

.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)"; }) 

別のソリューここで最初の値を上書きしますtransformを設定するために呼び出しますsymbolをネストされたg要素に入れて、それぞれに個別の変換を適用することです（example）。