Last active
December 28, 2015 17:29
-
-
Save rifler/7536267 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! d3.chart - v0.1.3 | |
* License: MIT Expat | |
* Date: 2013-10-07 | |
*/ | |
(function(t){"use strict";var e=t.d3Chart,r=t.d3Chart={},n=t.d3;r.noConflict=function(){return t.d3Chart=e,r},r.assert=function(t,e){if(!t)throw Error("[d3.chart] "+e)},r.assert(n,"d3.js is required"),r.assert("string"==typeof n.version&&n.version.match(/^3/),"d3.js version 3 is required")})(this),function(t){"use strict";var e=t.d3Chart,r=t.d3,n=function(t){e.assert(t,"Layers must be initialized with a base."),this._base=t,this._handlers={}};n.prototype.dataBind=function(){e.assert(!1,"Layers must specify a `dataBind` method.")},n.prototype.insert=function(){e.assert(!1,"Layers must specify an `insert` method.")},n.prototype.on=function(t,e,r){r=r||{},t in this._handlers||(this._handlers[t]=[]),this._handlers[t].push({callback:e,chart:r.chart||null})},n.prototype.off=function(t,e){var r,n=this._handlers[t];if(n){if(1===arguments.length)return n.length=0,undefined;for(r=n.length-1;r>-1;--r)n[r].callback===e&&n.splice(r,1)}},n.prototype.draw=function(t){var n,i,s,a,o,h,c,l;n=this.dataBind.call(this._base,t),e.assert(n&&n.call===r.selection.prototype.call,"Invalid selection defined by `Layer#dataBind` method."),e.assert(n.enter,"Layer selection not properly bound."),i=n.enter(),i._chart=this._base._chart,s=[{name:"update",selection:n},{name:"enter",selection:this.insert.bind(i)},{name:"merge",selection:n},{name:"exit",selection:n.exit.bind(n)}];for(var u=0,p=s.length;p>u;++u){if(h=s[u].name,a=s[u].selection,"function"==typeof a&&(a=a()),e.assert(a&&a.call===r.selection.prototype.call,"Invalid selection defined for '"+h+"' lifecycle event."),o=this._handlers[h])for(c=0,l=o.length;l>c;++c)a._chart=o[c].chart||this._base._chart,a.call(o[c].callback);if(o=this._handlers[h+":transition"],o&&o.length)for(a=a.transition(),c=0,l=o.length;l>c;++c)a._chart=o[c].chart||this._base._chart,a.call(o[c].callback)}},r.selection.prototype.layer=function(t){var e,r=new n(this);if(r.dataBind=t.dataBind,r.insert=t.insert,"events"in t)for(e in t.events)r.on(e,t.events[e]);return this.on=function(){return r.on.apply(r,arguments)},this.off=function(){return r.off.apply(r,arguments)},this.draw=function(){return r.draw.apply(r,arguments)},this}}(this),function(t,e){"use strict";function r(t){var e,r,n,i;if(!t)return t;for(r=arguments.length,e=1;r>e;e++)if(n=arguments[e])for(i in n)t[i]=n[i];return t}var n=t.d3Chart,i=t.d3,s=Object.hasOwnProperty,a=function(t){this.constructor=t},o=function(t,e){var r;return a.prototype=t.prototype,r=new a(t),t.apply(r,e),r},h=function(t,e){var r=this.constructor.__super__;r&&h.call(r,t,e),s.call(this.constructor.prototype,"initialize")&&this.initialize.apply(t,e)},c=function(t){this.base=t,this._layers={},this._mixins=[],this._events={},h.call(this,this,Array.prototype.slice.call(arguments,1))};c.prototype.unlayer=function(t){var e=this.layer(t);return delete this._layers[t],delete e._chart,e},c.prototype.layer=function(t,e,r){var i;if(1===arguments.length)return this._layers[t];if(2===arguments.length){if("function"==typeof e.draw)return e._chart=this,this._layers[t]=e,this._layers[t];n.assert(!1,"When reattaching a layer, the second argument must be a d3.chart layer")}return i=e.layer(r),this._layers[t]=i,e._chart=this,i},c.prototype.initialize=function(){},c.prototype.transform=function(t){return t},c.prototype.mixin=function(t,e){var r=Array.prototype.slice.call(arguments,2);r.unshift(e);var n=c[t],i=o(n,r);return this._mixins.push(i),i},c.prototype.draw=function(t){var e,r,n;t=this.transform(t);for(e in this._layers)this._layers[e].draw(t);for(r=0,n=this._mixins.length;n>r;r++)this._mixins[r].draw(t)},c.prototype.on=function(t,e,r){var n=this._events[t]||(this._events[t]=[]);return n.push({callback:e,context:r||this,_chart:this}),this},c.prototype.once=function(t,e,r){var n=this,i=function(){n.off(t,i),e.apply(this,arguments)};return this.on(t,i,r)},c.prototype.off=function(t,e,r){var n,i,s,a,o,h;if(0===arguments.length){for(t in this._events)this._events[t].length=0;return this}if(1===arguments.length)return s=this._events[t],s&&(s.length=0),this;for(n=t?[t]:Object.keys(this._events),o=0;n.length>o;o++)for(i=n[o],s=this._events[i],h=s.length;h--;)a=s[h],(e&&e===a.callback||r&&r===a.context)&&s.splice(h,1);return this},c.prototype.trigger=function(t){var r,n,i=Array.prototype.slice.call(arguments,1),s=this._events[t];if(s!==e)for(r=0;s.length>r;r++)n=s[r],n.callback.apply(n.context,i);return this},c.extend=function(t,e,n){var i,a=this;i=e&&s.call(e,"constructor")?e.constructor:function(){return a.apply(this,arguments)},r(i,a,n);var o=function(){this.constructor=i};return o.prototype=a.prototype,i.prototype=new o,e&&r(i.prototype,e),i.__super__=a.prototype,c[t]=i,i},i.chart=function(t){return 0===arguments.length?c:1===arguments.length?c[t]:c.extend.apply(c,arguments)},i.selection.prototype.chart=function(t){if(0===arguments.length)return this._chart;var e,r=c[t];return n.assert(r,"No chart registered with name '"+t+"'"),e=Array.prototype.slice.call(arguments,1),e.unshift(this),o(r,e)},i.selection.enter.prototype.chart=function(){return this._chart},i.transition.prototype.chart=i.selection.enter.prototype.chart}(this); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Pie chart</title> | |
<script src="http://d3js.org/d3.v3.js"></script> | |
<script src="d3.chart.js"></script> | |
<script src="pie.js"></script> | |
<style> | |
svg | |
{ | |
height: 400px; | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
<input class="add-data" type="button" value="More data" /> | |
</div> | |
<svg></svg> | |
<script> | |
d3.select('.add-data').on('click', function () { | |
data.push({ | |
name: 'someName', | |
value: Math.floor(Math.random() * 100000) | |
}); | |
pieChart.draw(data); | |
}); | |
var data = [ | |
{ | |
name: 'Chrome', | |
value: 150000 | |
}, | |
{ | |
name: 'Firefox', | |
value: 125000 | |
}, | |
{ | |
name: 'Opera', | |
value: 100000 | |
}, | |
{ | |
name: 'Safari', | |
value: 80000 | |
} | |
]; | |
var pieChart = d3.select('svg') | |
.chart('pie'); | |
pieChart.draw(data); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
d3.chart('pie', { | |
initialize: function () { | |
var chart = this; | |
chart.margin = { | |
top: 10, | |
right: 10, | |
bottom: 10, | |
left: 10 | |
}; | |
chart.width = parseInt(chart.base.style('width')) - chart.margin.left - chart.margin.right; | |
chart.height = parseInt(chart.base.style('height')) - chart.margin.top - chart.margin.bottom; | |
chart.radius = Math.floor(Math.min(chart.height, chart.width) / 2); | |
chart.color= d3.scale.ordinal() | |
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
chart.arc = d3.svg.arc() | |
.outerRadius(chart.radius) | |
.innerRadius(chart.radius * 0.5); | |
chart.pie = d3.layout.pie() | |
.sort(null) | |
.value(function (d) { return d.value; }); | |
chart.areas = {}; | |
chart.areas.slices = chart.base.append('g') | |
.classed('pieWrap', true) | |
.attr('transform', 'translate(' + (chart.width / 2) + ', ' + (chart.height / 2) + ')'); | |
chart.layer('slices', chart.areas.slices, { | |
dataBind: function (data) { | |
var chart = this.chart(); | |
return this.selectAll('.pieWrap') | |
.data(chart.pie(data)); | |
}, | |
insert: function () { | |
return this.append('g') | |
.classed('slice', true) | |
.append('path') | |
.on('mouseover', function (d, i) { | |
d3.select(this) | |
.classed('hover', true) | |
.attr('fill-opacity', '0.75'); | |
}) | |
.on('mouseout', function () { | |
d3.select(this) | |
.classed('hover', false) | |
.attr('fill-opacity', '1'); | |
}); | |
}, | |
events: { | |
enter: function () { | |
var chart = this.chart(); | |
this | |
.attr('d', chart.arc) | |
.attr('stroke', '#fff') | |
.attr('fill', function (d, i) { | |
return chart.color(i); | |
}); | |
}, | |
update: function () { | |
var chart = this.chart(); | |
this.select('path') | |
.attr('d', chart.arc) | |
.attr('stroke', '#fff') | |
.attr('fill', function (d, i) { | |
return chart.color(i); | |
}); | |
} | |
} | |
}); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment