d3.js文字在旋轉時消失

Question

我已經打了半天似乎很簡單的問題沒有用，所以我很樂意從stackoverflow天才得到一些好建議。

我在http://62.165.130.126/d3-question

演示我試圖把它變成的jsfiddle但無法獲得正確的庫，希望這仍然可以讓你在潛水。

問題是展示自身在旋轉文字時d3.js javascript代碼消失。或者實際上是旋轉文本的一部分。

頁面上的每一對酒吧應該有兩行文字旋轉45度（下坡），不要寫在鄰居。如果我不旋轉文字，一切都可見（但重疊），但如果我這樣做，只有第一對線是確定的。之後，第一個文本消失（或某些版本被幾十個像素看似雜亂無章），但第二個文本恰好在它應該使用完全相同的代碼結構的位置。我已經交換了價值觀，問題與價值觀無關，而與訂單有關。

這裏是我寫的JavaScript中的主要代碼。

$.each(data, function(a_key,a_val){ 
      $.each(a_val, function(form_key,form_val){ 
       $.each(form_val, function(person_key,person_val){ 
        svg.append("rect") 
       .attr("x", start*2*width+width) 
       .attr("y", 420-person_val.val1/person_val.val1_max*400) 
       .attr("width", width-5) 
       .attr("height", person_val.val1/person_val.val1_max*400) 
       .style("fill", "red"); 
      svg.append("rect") 
       .attr("x", start*2*width) 
       .attr("y", 420-person_val.val2/person_val.val2_max*400) 
       .attr("width", width-5) 
       .attr("height", person_val.val2/person_val.val2_max*400) 
       .style("fill", "green"); 
      svg.append("text") 
         .attr("text-anchor", "start") 
         .attr("transform","translate(" + start*2*width+20 + ",430) rotate(45)") 
         .style("font-size","0.85em") 
         .text(person_val.pname); 
        svg.append("text") 
         .attr("text-anchor", "start") 
         .attr("transform","translate(" + start*2*width + ",430) rotate(45)") 
         .style("font-size","0.85em") 
         .text(person_val.ptype); 
        start++; 
       }); 
      }); 

該應用程序只是一個真正的解決方案的樣機，但應顯示基本問題沒有分心。每一對酒吧都應該有他們下面的描述文字。目前它們還沒有被集中，但如果事情理清，那麼改變應該是直截了當的。

任何人有任何想法如何糾正代碼？

Answer 1

問題出在"translate(" + start*2*width+20 + ",430) rotate(45)"的代碼。 結果之一是translate(8020,430) rotate(45)。 Javascript將20轉換爲字符串。試着把大括號放在start*2*width+20的表情。