d3.js 文字在旋转时消失

Question

看似简单的问题折腾了半天无果，求Whosebug大神指教

有一个演示

我尝试将其放入 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 表达式。

d3.js 文字在旋转时消失

d3.js text disappearing when rotating

html

javascript

jquery

text-rotation

d3.js