d3.js text disappearing when rotating

I have fought half a day with seemingly simple problem with no avail so I'd love to get some good advice from stackoverflow geniuses.

I have a demo at http://62.165.130.126/d3-question

I tried to put it into jsfiddle but couldn't get the libraries right, hope this still allows you to dive in.

The problem is demonstrating itself in a d3.js javascript code when rotating text disappears. Or actually part of the rotating text.

Each pair of bars on the page should have two lines of the text rotated 45 degrees (downhill) not to write over the neighbors. If I don't rotate text everything is visible (but overlapping), but if I do, only the first pair of lines is OK. After that the first text disappears (or on some version was misplaced by some tens of pixels seemingly haphazard) but the second text sits right where it should using exactly the same code structure. I have exchanged the values and the problem isn't connected with the values but the order.

Here is the main code in javascript I have written.

$.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++;
                });
            });

The application is just a mockup of the real solution but should show the essential problem without distractions. Each pair of bars should have the describing text below them. Currently they aren't centered yet but if things sort out that change should be straightforward.

Anybody any idea how to correct the code?

The problem is with "translate(" + start*2*width+20 + ",430) rotate(45)" code. One of the results is translate(8020,430) rotate(45). Javascript turned 20 into string. Try to put braces around start*2*width+20 expression.