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}

让它发挥作用。

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

2 个答案: