Как настроить ссылочный индекс на горизонтальной гистограмме и контроль перехода

вот мой код

var w = ($ ( ".column" ).width());
                    var h = ($ ( ".column" ).width());
                    var barPadding = 15;

                    var dataset = [ ['Graphic Design' , 7], ['Branding' , 8], ['Digital Animation' , 10], ['Web Design' , 9], ['Typography' , 7], ['AV Production' , 9] ];

                    //Create SVG element
                    var bars = d3.select(".column")
                                .append("svg")
                                .attr("width", w)
                                .attr("height", h)

                    //starting rects
                    var graph = bars.selectAll("rect")
                       .data(dataset)
                       .enter()
                       .append("rect")
                       .attr("width", 0)
                       .attr("fill", "#636363");

                    //labels
                    var text = bars.selectAll("text")
                        .data(dataset)
                        .enter()
                        .append("text");

                    //Add SVG Text Element Attributes
                    var textLabels = text
                        .attr("x", 10)
                        .attr("y", function(d, i) {
                            return 35 + i * (h / dataset.length); })
                        .text( function (d) { return d[0]; })
                        .attr("font-family", "Quicksand, sans-serif;")
                        .attr("font-weight", "bold")
                        .attr("font-size", "0px")
                        .attr("fill", "#1c1d1e");

                    //transition at waypoint                          
                    $('#slide-4').waypoint(function(){
                    //transform the bars
                    graph.transition()
                       .duration(1000) // this is 1s
                        .delay(400)     // this is 0.1s
                       .attr("y", function(d, i) {
                            return i * (h / dataset.length);
                       })
                       .attr("x", 0)
                       .attr("height", h / dataset.length - barPadding)
                       .attr("width", function(d) {
                            return (w * d[1] / 10);
                       })
                       .attr("fill", "#F05D5C");
                      //transform the labels 
                    text.transition()
                        .duration(1000) // this is 1s
                        .delay(400)     // this is 0.1s
                        .attr("font-size", "20px")  
                      },{ offset: '-100%' }
                      );

И небольшая демонстрация: http://jsfiddle.net/65qNa/6/

Все работает так, как должно быть, но если вы перейдете по ссылке, вы увидите несколько баров и их ярлыков, которые все время появляются из ниоткуда.

1) Мне бы хотелось, чтобы эти бары имели для каждого из них ссылочный индекс в виде простого скучного серого прямоугольника той же высоты, но с шириной всего div, содержащего скрипт. Я попробовал несколько решений: создав еще один SVG, я не смог поместить его за свой существующий; поместив div за div, над которым я работаю, почему-то не работает на моей странице.

2) Было бы также прекрасно, если бы эти бары и ярлыки могли охватывать один за другим, а не совсем.

Можете ли вы, ребята, помочь мне? Спасибо!