diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js index d352b9d..d88b601 100644 --- a/app/main/static/js/charges.js +++ b/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); -- libgit2 0.21.2