Bullet charts: add transitions for dynamic data.
This commit is contained in:
Jason Davies
Родитель
28c54a822f
Коммит
f0f146715d
|
|
@ -52,6 +52,7 @@ d3.chart.bullet = function() {
|
|||
.enter().append('svg:rect')
|
||||
.attr('class', 'range');
|
||||
chart.selectAll('rect.range')
|
||||
.transition()
|
||||
.attr('width', scale)
|
||||
.attr('height', height)
|
||||
.attr('style', function(d, i) { return 'fill:' + rangeColor(i) });
|
||||
|
|
@ -60,6 +61,7 @@ d3.chart.bullet = function() {
|
|||
.enter().append('svg:rect')
|
||||
.attr('class', 'measure');
|
||||
chart.selectAll('rect.measure')
|
||||
.transition()
|
||||
.attr('width', scale)
|
||||
.attr('height', height / 3)
|
||||
.attr('y', height / 3)
|
||||
|
|
@ -71,6 +73,7 @@ d3.chart.bullet = function() {
|
|||
.attr('stroke', '#000')
|
||||
.attr('stroke-width', '2px')
|
||||
chart.selectAll('line.marker')
|
||||
.transition()
|
||||
.attr('x1', scale)
|
||||
.attr('x2', scale)
|
||||
.attr('y1', height/6)
|
||||
|
|
@ -84,6 +87,7 @@ d3.chart.bullet = function() {
|
|||
.attr('stroke', '#666')
|
||||
.attr('stroke-width', '.5px')
|
||||
this.selectAll('line.rule')
|
||||
.transition()
|
||||
.attr('x1', scale)
|
||||
.attr('x2', scale)
|
||||
.attr('y1', height)
|
||||
|
|
@ -96,9 +100,10 @@ d3.chart.bullet = function() {
|
|||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', '1em')
|
||||
this.selectAll('text.tick')
|
||||
.text(tickFormat)
|
||||
.transition()
|
||||
.attr('x', scale)
|
||||
.attr('y', height * 7/6)
|
||||
.text(tickFormat)
|
||||
}
|
||||
|
||||
var maxlength = function(l) {
|
||||
|
|
|
|||
|
|
@ -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").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").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").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").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").attr("x",k).attr("y",h*7/6).text(l)},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(){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}})()
|
||||
|
|
@ -51,6 +51,7 @@ d3.chart.bullet = function() {
|
|||
.enter().append('svg:rect')
|
||||
.attr('class', 'range');
|
||||
chart.selectAll('rect.range')
|
||||
.transition()
|
||||
.attr('width', scale)
|
||||
.attr('height', height)
|
||||
.attr('style', function(d, i) { return 'fill:' + rangeColor(i) });
|
||||
|
|
@ -59,6 +60,7 @@ d3.chart.bullet = function() {
|
|||
.enter().append('svg:rect')
|
||||
.attr('class', 'measure');
|
||||
chart.selectAll('rect.measure')
|
||||
.transition()
|
||||
.attr('width', scale)
|
||||
.attr('height', height / 3)
|
||||
.attr('y', height / 3)
|
||||
|
|
@ -70,6 +72,7 @@ d3.chart.bullet = function() {
|
|||
.attr('stroke', '#000')
|
||||
.attr('stroke-width', '2px')
|
||||
chart.selectAll('line.marker')
|
||||
.transition()
|
||||
.attr('x1', scale)
|
||||
.attr('x2', scale)
|
||||
.attr('y1', height/6)
|
||||
|
|
@ -83,6 +86,7 @@ d3.chart.bullet = function() {
|
|||
.attr('stroke', '#666')
|
||||
.attr('stroke-width', '.5px')
|
||||
this.selectAll('line.rule')
|
||||
.transition()
|
||||
.attr('x1', scale)
|
||||
.attr('x2', scale)
|
||||
.attr('y1', height)
|
||||
|
|
@ -95,9 +99,10 @@ d3.chart.bullet = function() {
|
|||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', '1em')
|
||||
this.selectAll('text.tick')
|
||||
.text(tickFormat)
|
||||
.transition()
|
||||
.attr('x', scale)
|
||||
.attr('y', height * 7/6)
|
||||
.text(tickFormat)
|
||||
}
|
||||
|
||||
var maxlength = function(l) {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче