我与看似简单的问题斗争了半天，但无济于事，所以我很想从 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++;
});
});
该应用程序只是真实解决方案的模型，但应无干扰地显示基本问题。每对条形图下方应有描述文本。目前他们还没有居中，但如果事情解决了，那么改变应该是直截了当的。
有人知道如何更正代码吗？