Add optional duration for bullet chart transitions.

d3.chart.js

@@ -32,7 +32,10 @@ d3.chart.bullet = function() {
     }
   };
 
-  var bullet = function() {
+  var bullet = function(chart, duration) {
+    var transition = duration ? 
+      function(x) { return x.transition().duration(duration) } :
+      function(x) { return x };
     var data = [];
     for (var i=0, ii=this[0].length; i<ii; i++) {
       data.push(this[0][i].__data__);
@@ -46,22 +49,19 @@ d3.chart.bullet = function() {
     // sort to lay SVG in correct order
     reverse(cache.ranges);
     reverse(cache.measures);
-    var chart = this;
     chart.selectAll('rect.range')
         .data(ranges)
       .enter().append('svg:rect')
         .attr('class', 'range');
-    chart.selectAll('rect.range')
+    transition(chart.selectAll('rect.range'))
-      .transition()
         .attr('width', scale)
         .attr('height', height)
-        .attr('style', function(d, i) { return 'fill:' + rangeColor(i) });
+        .attr('fill', function(d, i) { return rangeColor(i) });
     chart.selectAll('rect.measure')
         .data(measures)
       .enter().append('svg:rect')
         .attr('class', 'measure');
-    chart.selectAll('rect.measure')
+    transition(chart.selectAll('rect.measure'))
-      .transition()
         .attr('width', scale)
         .attr('height', height / 3)
         .attr('y', height / 3)
@@ -72,8 +72,7 @@ d3.chart.bullet = function() {
         .attr('class', 'marker')
         .attr('stroke', '#000')
         .attr('stroke-width', '2px')
-    chart.selectAll('line.marker')
+    transition(chart.selectAll('line.marker'))
-      .transition()
         .attr('x1', scale)
         .attr('x2', scale)
         .attr('y1', height/6)
@@ -86,8 +85,7 @@ d3.chart.bullet = function() {
         .attr('class', 'rule')
         .attr('stroke', '#666')
         .attr('stroke-width', '.5px')
-    this.selectAll('line.rule')
+    transition(chart.selectAll('line.rule'))
-      .transition()
         .attr('x1', scale)
         .attr('x2', scale)
         .attr('y1', height)
@@ -99,9 +97,8 @@ d3.chart.bullet = function() {
         .attr('class', 'tick')
         .attr('text-anchor', 'middle')
         .attr('dy', '1em')
-    this.selectAll('text.tick')
+    transition(chart.selectAll('text.tick')
-        .text(tickFormat)
+      .text(tickFormat))
-      .transition()
         .attr('x', scale)
         .attr('y', height * 7/6)
   }

d3.chart.min.js

@@ -1 +1 @@
-(function(){d3.chart={},d3.chart.bullet=function(){var a="left",b=function(a){return a.ranges},c=function(a){return a.markers},d=function(a){return a.measures},e,f=null,g=800,h=30,i=d3.scale.linear(),j=d3.scale.linear(),k=d3.scale.linear(),l=d3.format(",.0f"),m=function(a){for(var b=0,c=a.length;b<c;b++)a[b].sort(function(a,b){return b-a})},n=function(){var a=[];for(var e=0,f=this[0].length;e<f;e++)a.push(this[0][e].__data__);var g={ranges:a.map(b),measures:a.map(d),markers:a.map(c)};p(g),m(g.ranges),m(g.measures);var n=this;n.selectAll("rect.range").data(b).enter().append("svg:rect").attr("class","range"),n.selectAll("rect.range").transition().attr("width",k).attr("height",h).attr("style",function(a,b){return"fill:"+i(b)}),n.selectAll("rect.measure").data(d).enter().append("svg:rect").attr("class","measure"),n.selectAll("rect.measure").transition().attr("width",k).attr("height",h/3).attr("y",h/3).attr("fill",function(a,b){return j(b)}),n.selectAll("line.marker").data(c).enter().append("svg:line").attr("class","marker").attr("stroke","#000").attr("stroke-width","2px"),n.selectAll("line.marker").transition().attr("x1",k).attr("x2",k).attr("y1",h/6).attr("y2",h*5/6);var o=k.ticks(10),q=this.selectAll("line.rule").data(o);q.exit().remove(),q.enter().append("svg:line").attr("class","rule").attr("stroke","#666").attr("stroke-width",".5px"),this.selectAll("line.rule").transition().attr("x1",k).attr("x2",k).attr("y1",h).attr("y2",h*7/6);var r=this.selectAll("text.tick").data(o);r.exit().remove(),r.enter().append("svg:text").attr("class","tick").attr("text-anchor","middle").attr("dy","1em"),this.selectAll("text.tick").text(l).transition().attr("x",k).attr("y",h*7/6)},o=function(a){return d3.max(a,function(a){return a.length})},p=function(b){e=/^left|right$/.test(a),i.domain([0,Math.max(1,o(b.ranges)-1)]).range(["#eee","#bbb"]),j.domain([0,Math.max(1,o(b.measures)-1)]).range(["lightsteelblue","steelblue"]),f=d3.max([].concat(b.ranges,b.markers,b.measures),function(a){return d3.max(a)}),k.domain([0,f]).range([0,g])};n.orient=function(b){if(!arguments.length)return a;a=b;return n},n.ranges=function(a){if(!arguments.length)return b;b=a;return n},n.markers=function(a){if(!arguments.length)return c;c=a;return n},n.measures=function(a){if(!arguments.length)return d;d=a;return n},n.maximum=function(a){if(!arguments.length)return f;f=a;return n},n.width=function(a){if(!arguments.length)return g;g=a;return n},n.height=function(a){if(!arguments.length)return h;h=a;return n},n.tickFormat=function(a){if(!arguments.length)return l;l=a;return n};return n}})()
+(function(){d3.chart={},d3.chart.bullet=function(){var a="left",b=function(a){return a.ranges},c=function(a){return a.markers},d=function(a){return a.measures},e,f=null,g=800,h=30,i=d3.scale.linear(),j=d3.scale.linear(),k=d3.scale.linear(),l=d3.format(",.0f"),m=function(a){for(var b=0,c=a.length;b<c;b++)a[b].sort(function(a,b){return b-a})},n=function(a,e){var f=e?function(a){return a.transition().duration(e)}:function(a){return a},g=[];for(var n=0,o=this[0].length;n<o;n++)g.push(this[0][n].__data__);var q={ranges:g.map(b),measures:g.map(d),markers:g.map(c)};p(q),m(q.ranges),m(q.measures),a.selectAll("rect.range").data(b).enter().append("svg:rect").attr("class","range"),f(a.selectAll("rect.range")).attr("width",k).attr("height",h).attr("fill",function(a,b){return i(b)}),a.selectAll("rect.measure").data(d).enter().append("svg:rect").attr("class","measure"),f(a.selectAll("rect.measure")).attr("width",k).attr("height",h/3).attr("y",h/3).attr("fill",function(a,b){return j(b)}),a.selectAll("line.marker").data(c).enter().append("svg:line").attr("class","marker").attr("stroke","#000").attr("stroke-width","2px"),f(a.selectAll("line.marker")).attr("x1",k).attr("x2",k).attr("y1",h/6).attr("y2",h*5/6);var r=k.ticks(10),s=this.selectAll("line.rule").data(r);s.exit().remove(),s.enter().append("svg:line").attr("class","rule").attr("stroke","#666").attr("stroke-width",".5px"),f(a.selectAll("line.rule")).attr("x1",k).attr("x2",k).attr("y1",h).attr("y2",h*7/6);var t=this.selectAll("text.tick").data(r);t.exit().remove(),t.enter().append("svg:text").attr("class","tick").attr("text-anchor","middle").attr("dy","1em"),f(a.selectAll("text.tick").text(l)).attr("x",k).attr("y",h*7/6)},o=function(a){return d3.max(a,function(a){return a.length})},p=function(b){e=/^left|right$/.test(a),i.domain([0,Math.max(1,o(b.ranges)-1)]).range(["#eee","#bbb"]),j.domain([0,Math.max(1,o(b.measures)-1)]).range(["lightsteelblue","steelblue"]),f=d3.max([].concat(b.ranges,b.markers,b.measures),function(a){return d3.max(a)}),k.domain([0,f]).range([0,g])};n.orient=function(b){if(!arguments.length)return a;a=b;return n},n.ranges=function(a){if(!arguments.length)return b;b=a;return n},n.markers=function(a){if(!arguments.length)return c;c=a;return n},n.measures=function(a){if(!arguments.length)return d;d=a;return n},n.maximum=function(a){if(!arguments.length)return f;f=a;return n},n.width=function(a){if(!arguments.length)return g;g=a;return n},n.height=function(a){if(!arguments.length)return h;h=a;return n},n.tickFormat=function(a){if(!arguments.length)return l;l=a;return n};return n}})()

examples/bullet/bullet-multiples.html

@@ -33,7 +33,7 @@ var randomize = function() {
   }
   var chart = vis.selectAll('g.chart');
   chart.data(bullets);
-  chart.call(bullet);
+  chart.call(bullet, 1000);
 }
 
     </script>

src/chart/bullet.js

@@ -31,7 +31,10 @@ d3.chart.bullet = function() {
     }
   };
 
-  var bullet = function() {
+  var bullet = function(chart, duration) {
+    var transition = duration ? 
+      function(x) { return x.transition().duration(duration) } :
+      function(x) { return x };
     var data = [];
     for (var i=0, ii=this[0].length; i<ii; i++) {
       data.push(this[0][i].__data__);
@@ -45,22 +48,19 @@ d3.chart.bullet = function() {
     // sort to lay SVG in correct order
     reverse(cache.ranges);
     reverse(cache.measures);
-    var chart = this;
     chart.selectAll('rect.range')
         .data(ranges)
       .enter().append('svg:rect')
         .attr('class', 'range');
-    chart.selectAll('rect.range')
+    transition(chart.selectAll('rect.range'))
-      .transition()
         .attr('width', scale)
         .attr('height', height)
-        .attr('style', function(d, i) { return 'fill:' + rangeColor(i) });
+        .attr('fill', function(d, i) { return rangeColor(i) });
     chart.selectAll('rect.measure')
         .data(measures)
       .enter().append('svg:rect')
         .attr('class', 'measure');
-    chart.selectAll('rect.measure')
+    transition(chart.selectAll('rect.measure'))
-      .transition()
         .attr('width', scale)
         .attr('height', height / 3)
         .attr('y', height / 3)
@@ -71,8 +71,7 @@ d3.chart.bullet = function() {
         .attr('class', 'marker')
         .attr('stroke', '#000')
         .attr('stroke-width', '2px')
-    chart.selectAll('line.marker')
+    transition(chart.selectAll('line.marker'))
-      .transition()
         .attr('x1', scale)
         .attr('x2', scale)
         .attr('y1', height/6)
@@ -85,8 +84,7 @@ d3.chart.bullet = function() {
         .attr('class', 'rule')
         .attr('stroke', '#666')
         .attr('stroke-width', '.5px')
-    this.selectAll('line.rule')
+    transition(chart.selectAll('line.rule'))
-      .transition()
         .attr('x1', scale)
         .attr('x2', scale)
         .attr('y1', height)
@@ -98,9 +96,8 @@ d3.chart.bullet = function() {
         .attr('class', 'tick')
         .attr('text-anchor', 'middle')
         .attr('dy', '1em')
-    this.selectAll('text.tick')
+    transition(chart.selectAll('text.tick')
-        .text(tickFormat)
+      .text(tickFormat))
-      .transition()
         .attr('x', scale)
         .attr('y', height * 7/6)
   }