0

here is my code

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%' }
                      );

And a little demo: http://jsfiddle.net/65qNa/6/

Everything works as it should be but if you follow the link you can see some bars and their labels spawning all together from nowhere.

1) I'd love those bars to have each one a reference index behind them in the shape of a plain boring grey rect the same height but with the width of the whole div containing the script. I've tried a few solutions: creating another svg I was unable to put it behind my existing one; putting a div behind the div I'm working on didn't work well on my page for some reason.

2) It would also be lovely if those bars and labels could span one by one and not altogether.

Can you guys please help me? Thank you!

2 Answers 2

0

2)

try something like (I haven't tested it):

 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);
    })
1
  • After a day into d3 I've finally learned how it handles data. THe solution to my point 2 is: .delay(function(d,i){return 300+i*300}
    – Neurone00
    Feb 20, 2014 at 20:20
0

2) because of how d3 handles data:

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

Like this the rect at [0] won't have any transition though. It's enough to tweak it manually and write:

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

to make it work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.