github
/
d3
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bullet charts: support dynamic data.

This commit is contained in:
Jason Davies 2011-04-07 19:32:48 +01:00
Родитель 0e54ee835d
Коммит 28c54a822f
4 изменённых файлов: 64 добавлений и 36 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

37
d3.chart.js
Просмотреть файл

@ -19,7 +19,7 @@ d3.chart.bullet = function() {
measures = function(d) { return d.measures },
horizontal,
maximum = null,
width = 500,
width = 800,
height = 30,
rangeColor = d3.scale.linear(),
measureColor = d3.scale.linear(),
@ -50,14 +50,16 @@ d3.chart.bullet = function() {
chart.selectAll('rect.range')
.data(ranges)
.enter().append('svg:rect')
.attr('class', 'range')
.attr('class', 'range');
chart.selectAll('rect.range')
.attr('width', scale)
.attr('height', height)
.attr('style', function(d, i) { return 'fill:' + rangeColor(i) });
chart.selectAll('rect.measure')
.data(measures)
.enter().append('svg:rect')
.attr('class', 'measure')
.attr('class', 'measure');
chart.selectAll('rect.measure')
.attr('width', scale)
.attr('height', height / 3)
.attr('y', height / 3)
@ -66,31 +68,36 @@ d3.chart.bullet = function() {
.data(markers)
.enter().append('svg:line')
.attr('class', 'marker')
.attr('stroke', '#000')
.attr('stroke-width', '2px')
chart.selectAll('line.marker')
.attr('x1', scale)
.attr('x2', scale)
.attr('y1', height/6)
.attr('y2', height * 5/6)
.attr('stroke', '#000')
.attr('stroke-width', '2px')
var ticks = scale.ticks(10);
this.selectAll('line.rule')
.data(ticks)
.enter().append('svg:line')
var ruleLine = this.selectAll('line.rule')
.data(ticks)
ruleLine.exit().remove();
ruleLine.enter().append('svg:line')
.attr('class', 'rule')
.attr('stroke', '#666')
.attr('stroke-width', '.5px')
this.selectAll('line.rule')
.attr('x1', scale)
.attr('x2', scale)
.attr('y1', height)
.attr('y2', height * 7/6)
.attr('stroke', '#666')
.attr('stroke-width', '.5px')
this.selectAll('text.tick')
.data(ticks)
.enter().append('svg:text')
var tickText = this.selectAll('text.tick')
.data(ticks);
tickText.exit().remove();
tickText.enter().append('svg:text')
.attr('class', 'tick')
.attr('x', scale)
.attr('y', height * 7/6)
.attr('text-anchor', 'middle')
.attr('dy', '1em')
this.selectAll('text.tick')
.attr('x', scale)
.attr('y', height * 7/6)
.text(tickFormat)
}

2
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=500,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").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").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("x1",k).attr("x2",k).attr("y1",h/6).attr("y2",h*5/6).attr("stroke","#000").attr("stroke-width","2px");var o=k.ticks(10);this.selectAll("line.rule").data(o).enter().append("svg:line").attr("class","rule").attr("x1",k).attr("x2",k).attr("y1",h).attr("y2",h*7/6).attr("stroke","#666").attr("stroke-width",".5px"),this.selectAll("text.tick").data(o).enter().append("svg:text").attr("class","tick").attr("x",k).attr("y",h*7/6).attr("text-anchor","middle").attr("dy","1em").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").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}})()

24
examples/bullet/bullet-multiples.html
Просмотреть файл

@ -12,17 +12,31 @@
var bullet = d3.chart.bullet().orient('left');
var vis = d3.select('body').append('svg:svg')
.attr('width', 1200)
.attr('width', 900)
.attr('height', 300)
.append('svg:g')
.attr('transform', 'translate(10)')
.selectAll('g.bullet')
.attr('transform', 'translate(10)');
vis.selectAll('g.chart')
.data(bullets)
.enter().append('svg:g')
.attr('class', 'bullet')
.attr('transform', function(d, i) { return 'translate(0,' + (i * 60) + ')' })
.attr('class', 'chart')
.attr('transform', function(d, i) { return 'translate(0,' + (i * 60) + ')' });
vis.selectAll('g.chart')
.call(bullet);
var randomize = function() {
for (var i=0, ii=bullets.length; i<ii; i++) {
var b = bullets[i];
b.ranges = b.ranges.map(function(d) { return Math.random() * 1000 });
b.markers = b.markers.map(function(d) { return Math.random() * 1000 });
b.measures = b.measures.map(function(d) { return Math.random() * 1000 });
}
var chart = vis.selectAll('g.chart');
chart.data(bullets);
chart.call(bullet);
}
</script>
<input type="button" value="Randomize!" onclick="randomize()">
</body>
</html>

37
src/chart/bullet.js
Просмотреть файл

@ -18,7 +18,7 @@ d3.chart.bullet = function() {
measures = function(d) { return d.measures },
horizontal,
maximum = null,
width = 500,
width = 800,
height = 30,
rangeColor = d3.scale.linear(),
measureColor = d3.scale.linear(),
@ -49,14 +49,16 @@ d3.chart.bullet = function() {
chart.selectAll('rect.range')
.data(ranges)
.enter().append('svg:rect')
.attr('class', 'range')
.attr('class', 'range');
chart.selectAll('rect.range')
.attr('width', scale)
.attr('height', height)
.attr('style', function(d, i) { return 'fill:' + rangeColor(i) });
chart.selectAll('rect.measure')
.data(measures)
.enter().append('svg:rect')
.attr('class', 'measure')
.attr('class', 'measure');
chart.selectAll('rect.measure')
.attr('width', scale)
.attr('height', height / 3)
.attr('y', height / 3)
@ -65,31 +67,36 @@ d3.chart.bullet = function() {
.data(markers)
.enter().append('svg:line')
.attr('class', 'marker')
.attr('stroke', '#000')
.attr('stroke-width', '2px')
chart.selectAll('line.marker')
.attr('x1', scale)
.attr('x2', scale)
.attr('y1', height/6)
.attr('y2', height * 5/6)
.attr('stroke', '#000')
.attr('stroke-width', '2px')
var ticks = scale.ticks(10);
this.selectAll('line.rule')
.data(ticks)
.enter().append('svg:line')
var ruleLine = this.selectAll('line.rule')
.data(ticks)
ruleLine.exit().remove();
ruleLine.enter().append('svg:line')
.attr('class', 'rule')
.attr('stroke', '#666')
.attr('stroke-width', '.5px')
this.selectAll('line.rule')
.attr('x1', scale)
.attr('x2', scale)
.attr('y1', height)
.attr('y2', height * 7/6)
.attr('stroke', '#666')
.attr('stroke-width', '.5px')
this.selectAll('text.tick')
.data(ticks)
.enter().append('svg:text')
var tickText = this.selectAll('text.tick')
.data(ticks);
tickText.exit().remove();
tickText.enter().append('svg:text')
.attr('class', 'tick')
.attr('x', scale)
.attr('y', height * 7/6)
.attr('text-anchor', 'middle')
.attr('dy', '1em')
this.selectAll('text.tick')
.attr('x', scale)
.attr('y', height * 7/6)
.text(tickFormat)
}