d3.js文字在旋转时消失

Question

我已经打了半天似乎很简单的问题没有用，所以我很乐意从*天才得到一些好建议。

我在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的表情。