Add optional duration for bullet chart transitions.
This commit is contained in:
Jason Davies
Родитель
f0f146715d
Коммит
34a055adc4
25
d3.chart.js
25
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()
|
||||
transition(chart.selectAll('rect.range'))
|
||||
.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()
|
||||
transition(chart.selectAll('rect.measure'))
|
||||
.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()
|
||||
transition(chart.selectAll('line.marker'))
|
||||
.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()
|
||||
transition(chart.selectAll('line.rule'))
|
||||
.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')
|
||||
.text(tickFormat)
|
||||
.transition()
|
||||
transition(chart.selectAll('text.tick')
|
||||
.text(tickFormat))
|
||||
.attr('x', scale)
|
||||
.attr('y', height * 7/6)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}})()
|
||||
|
|
@ -33,7 +33,7 @@ var randomize = function() {
|
|||
}
|
||||
var chart = vis.selectAll('g.chart');
|
||||
chart.data(bullets);
|
||||
chart.call(bullet);
|
||||
chart.call(bullet, 1000);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
transition(chart.selectAll('rect.range'))
|
||||
.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()
|
||||
transition(chart.selectAll('rect.measure'))
|
||||
.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()
|
||||
transition(chart.selectAll('line.marker'))
|
||||
.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()
|
||||
transition(chart.selectAll('line.rule'))
|
||||
.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')
|
||||
.text(tickFormat)
|
||||
.transition()
|
||||
transition(chart.selectAll('text.tick')
|
||||
.text(tickFormat))
|
||||
.attr('x', scale)
|
||||
.attr('y', height * 7/6)
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче