Add animations to load bars in d3.js graphs

Anais Amato · hitier
1 parent fd63e06e
Showing 1 changed file with 23 additions and 3 deletions Show diff stats
app/main/static/js/charges.js
@@ -255,15 +255,26 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             })
             .enter().append("rect")
             .attr("x", d => xCategories(d.key))
-            .attr("y", d => yScale(d.value))
             .attr("width", xCategories.bandwidth())
+                /* Transition part */
+                .attr("y",  d => { return height; })
+                .attr("height", 0)
+                    .transition()
+                    .duration(750)
+                    .delay(function (d, i) {
+                        return i * 150;
+                    })
+            .attr("y", d => yScale(d.value))
             .attr("height", d => height - yScale(d.value))
             .attr("fill", d => colorScale(d.key))
-            .attr("class", "bar")
+            .attr("class", "bar");
+
+        svg.selectAll("rect")
             .on("mouseover", mouseovergrouped)
             .on("mousemove", mousemove)
             .on("mouseleave", mouseleave);
+
     }
     function draw_categories_stacked(data, categories) {
@@ -301,9 +312,18 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .attr("class", "bar")
             .attr("x", d => xScale(d.data.period))
             .attr("width", xScale.bandwidth())
-            // .attr("width", 5)
+                /* transition part */
+                .attr("y",  d => { return height; })
+                .attr("height", 0)
+                    .transition()
+                    .duration(750)
+                    .delay(function (d, i) {
+                        return i * 150;
+                    })
             .attr("y", d => yScale(d[1]))
             .attr("height", d => height - yScale(d[1] - d[0]))
+
+        groups.selectAll("rect")
             .on("mouseover", mouseover)
             .on("mousemove", mousemove)
             .on("mouseleave", mouseleave);