如何在水平条形图和过渡控件上设置参考索引

Question

这是我的代码

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 我无法将其放在我现有的 svg 后面;由于某种原因，在我正在处理的div 后面放置一个div 在我的页面上效果不佳。

2）如果这些条形和标签可以一个接一个地跨越而不是完全跨越，那也是可爱的。

你们能帮帮我吗？谢谢！

Answer 1

2）

尝试类似的东西（我还没有测试过）：

 graph.transition()
    .duration(1000) // this is 1s
    .delay(400*function(d,i) {return i;})     // this is 0.1s
    .attr("y", function(d, i) {
    return i * (h / dataset.length);
    })

Answer 2

2）由于 D3 处理数据的方式：

.delay(function(d,i){return i * 300}

像这样，[0] 处的矩形不会有任何过渡。手动调整它并写入就足够了：

.delay(function(d,i){return **300 +** i * 300}

使其工作。