旋转时d3.js文本消失

Question

我已经为看似简单的问题奋斗了半天，但没有效果，所以我很想从堆叠的天才那里得到一些好的建议。

我在http://62.165.130.126/d3-question有个演示

我试着把它放进小提琴里，但没能把图书馆弄好，希望这还能让你投入其中。

当旋转文本消失时，问题是在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表达式周围。