Permalink
Browse files

Organize bar chart logic by lifecycle selection

This transformation further increases the readability of the chart and
helps ensure that future modifications maintain a reasonable structure.
  • Loading branch information...
jugglinmike committed Mar 3, 2013
1 parent 6fd6566 commit f9020e456296c9a593ae811ff37213b7a1e22a20
Showing with 27 additions and 18 deletions.
  1. +27 −18 scripts/bar-chart.js
View
@@ -16,36 +16,45 @@ window.BarChart = function(options) {
var svg = d3.select("body").append("svg")
.attr("class", "chart");
function chart() {
var rect = svg.selectAll("rect")
.data(data, function(d) { return d.time; });
var entering = rect.enter().insert("rect", "line");
var enteringTrans = entering.transition();
var exiting = rect.exit();
var trans = rect.transition();
var exitingTrans = exiting.transition();
entering
.attr("x", function(d, i) { return x(i + 1) - .5; })
function onEnter() {
this.attr("x", function(d, i) { return x(i + 1) - .5; })
.attr("y", function(d) { return h - y(d.value) - .5; })
.attr("width", w / data.length)
.attr("height", function(d) { return y(d.value); });
}
enteringTrans
.duration(1000)
function onEnterTrans() {
this.duration(1000)
.attr("x", function(d, i) { return x(i) - .5; });
}
trans
.duration(1000)
function onTrans() {
this.duration(1000)
.attr("x", function(d, i) { return x(i) - .5; });
}
exitingTrans
.duration(1000)
function onExitTrans() {
this.duration(1000)
.attr("x", function(d, i) { return x(i - 1) - .5; })
.remove();
}
function chart() {
var rect = svg.selectAll("rect")
.data(data, function(d) { return d.time; });
var entering = rect.enter().insert("rect", "line");
var enteringTrans = entering.transition();
var exiting = rect.exit();
var trans = rect.transition();
var exitingTrans = exiting.transition();
entering.call(onEnter);
enteringTrans.call(onEnterTrans);
trans.call(onTrans);
exitingTrans.call(onExitTrans);
}
chart.width = function(newWidth) {
if (!arguments.length) {
return w;

0 comments on commit f9020e4

Please sign in to comment.