我已经为一个看似简单的问题斗争了半天，但都无济于事，所以我很想从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++;
});
});
该应用程序只是真实解决方案的一个模型，但应该毫无干扰地显示基本问题。每一对条形图下面都应该有描述文字。目前，他们还没有集中起来，但如果事情解决了，改变应该是直接的。
有人知道如何更正代码吗？
问题出在"translate(" + start*2*width+20 + ",430) rotate(45)"代码上。其中一个结果是CCD_ 2。Javascript将20转换为字符串。尝试在start*2*width+20表达式周围加大括号。