D3.jsを使用して戻り関数をSVG変換属性に連結する方法

Question

d3.js svg機能を使用して配列データから値を取得しようとしています。データ配列からXおよびY値を取得できました。変数、今私は同じアプローチを使用して回転を取得したいが、内の関数を連結するのに問題があるtransform=rotate()私のコードは以下のとおりです。

var spaceCircles = [  
      {x:30, y:30, r: 45 } , 
      { x: 100 , y : 100 , r: 45 } 
     ]; 

    var svgContainer = d3.select("body").append("svg") 
         .attr("width", 800) 
         .attr("height", 400) 
         .style('background','#f4f4f4') 
         .style("border", "1px solid black"); 

     var circles = svgContainer.selectAll("rect") 
          .data(spaceCircles) 
          .enter() 
          .append("rect"); 

     var circleAttributes = circles 
         .attr("x", function (d) { return d.x }) 
         .attr("y", function (d) { return d.y }) 
         .attr("width", 80) 
         .attr("height", 20) 
       //below part is my problem 
         .attr('transform', 'rotate('+ function (d) { return d.r } +')'); 

.ATTR（ '変換'、+機能（D）{戻りd.r} + '）' '（回転'）;

どのような提案も素晴らしいでしょう。前もって感謝します！

Answer 1

あなたは全体rotate属性を返す必要があります：

.attr('transform', function (d){ 
    return 'rotate('+ d.r +')'; 
});