You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

d3evolution.min.js 6.5KB

1
  1. function D3Evolution(a,b){"use strict";var d,e,f,c=$.extend(!0,{title:"",width:800,height:400,margin:{top:80,right:60,bottom:40,left:60},yAxisLabel:"",type:"line",duration:1250,interpolate:"linear",legend:{buttonRadius:7,space:130,entries:[]}},b),g=c.width-c.margin.left-c.margin.right,h=c.height-c.margin.top-c.margin.bottom,i=d3.time.scale().range([0,g]),j=d3.scale.linear().range([h,0]),k=d3.svg.axis().scale(i),l=d3.svg.axis().scale(j).orient("left").ticks(5),m=d3.svg.axis().tickFormat("").scale(i).tickSize(-h,0),n=d3.svg.axis().tickFormat("").scale(j).orient("left").tickSize(-g,0),o=d3.scale.quantize().range([h,0]),p=d3.svg.area().x(function(a){return i(a.x)}).y0(function(a){return h}).y1(function(a){return o(null==a.y)}).interpolate("step"),q=d3.svg.line().defined(function(a){return null!=a.y}).x(function(a){return i(a.x)}).y(function(a){return j(a.y)}).interpolate(c.interpolate),r=d3.svg.area().defined(function(a){return null!=a.y}).x(function(a){return i(a.x)}).y0(function(a){return j(a.y0)}).y1(function(a){return j(a.y0+a.y)}).interpolate(c.interpolate),s=function(){var a;"area"===c.type?(d3.layout.stack()(d),a=d3.extent(d3.merge(d),function(a){return a.y0+a.y})):a=d3.extent(d3.merge(d),function(a){return a.y}),j.domain([a[0]>0?0:a[0],a[1]]),d3.transition().duration(c.duration).each(function(){A.select(".y.grid").call(n.scale(j)),A.select(".y.axis").call(l.scale(j))})},t=d3.scale.category10(),u=function(a){return void 0!==c.legend.entries[a]&&void 0!==c.legend.entries[a].color?c.legend.entries[a].color:t(a)},v=function(a){return void 0!==c.legend.entries[a]&&void 0!==c.legend.entries[a].label?c.legend.entries[a].label:"path_"+a},w=function(a){var b=a.reduce(function(a,b){return b.map(function(b,c){return b.y+(a[c]?a[c]:0)})},[]),c=$.extend(!0,[],a);return c.forEach(function(a){a.forEach(function(a,c){b[c]&&(a.y/=b[c])})}),c},x=function(){"percentage"===c.convert?(l.tickFormat(d3.format(".0%")),B.transition().duration(c.duration).style("opacity",0),d=w(e)):(l.tickFormat(null),B.transition().duration(c.duration).style("opacity",1),d=e),s()},y=d3.select("#"+a).append("svg").classed("d3evolution",!0).attr("width",c.width).attr("height",c.height),z=y.append("g").attr("class","legend"),A=y.append("g").attr("width",g).attr("height",h).attr("transform","translate("+c.margin.left+", "+c.margin.top+")");A.append("g").attr("class","x grid").attr("transform","translate(0,"+h+")").call(m),A.append("g").attr("class","y grid").attr("transform","translate(0,0)").call(n),A.append("g").attr("class","x axis").attr("transform","translate(0,"+h+")").call(k),A.append("g").attr("class","y axis").attr("transform","translate(0,0)").call(l);var B=A.append("text").attr("class","y label").attr("x",20-c.margin.left).attr("y",-20).text(c.yAxisLabel);y.append("svg:text").attr("class","chart-title").attr("x",c.width/2).attr("y",c.margin.top/3).attr("text-anchor","middle").text(c.title),this.data=function(a){e=a;var b=[];f=c.width-c.margin.right-c.legend.space*e.length,e.forEach(function(a){a.forEach(function(a){a.x*=1e3})});var g=d3.extent(d3.merge(e),function(a){return a.x});i.domain([g[0],g[1]]);var h=A.selectAll("path.path-null").data(e);h.enter().append("path").attr("class","path-null"),h.transition().duration(c.duration/2).style("opacity",0).each("end",function(){h.attr("d",p).transition().duration(c.duration/2).style("opacity",1)}),h.exit().remove(),x();var j=A.selectAll("path.path").data(d);j.enter().append("path").attr("class","path").attr("id",function(a,b){return"path_"+b}).on("click",function(a,b){l(b)}).on("mouseover",function(a,b){n(b)}).on("mouseout",function(a,b){n(b,!1)}).style("area"===c.type?{fill:function(a,b){return u(b)},stroke:"none","fill-opacity":function(a,c){return b[c]}}:{fill:"none",stroke:function(a,b){return u(b)},opacity:function(a,c){return b[c]}}),j.transition().duration(c.duration).attr("d","area"===c.type?r:q),j.exit().remove(),d3.transition().duration(c.duration).each(function(){A.select(".x.grid").call(m.scale(i)),A.select(".x.axis").call(k.scale(i))});var l=function(a){b[a]=0!=b[a]?0:1,d3.select("#circle_"+a).transition().duration(c.duration).style("fill-opacity",b[a]+.2),d3.select("#path_"+a).transition().duration(c.duration).style("opacity",b[a])};const n=function(a,d){d3.select("#circle_"+a).attr("r",c.legend.buttonRadius*(d===!1?1:1.3));const e=function(c){return d===!1?b[c]:c===a?1:0==b[c]?0:.4};A.selectAll("path.path").style("opacity",function(a,b){return e(b)}).style("fill-opacity",function(a,b){return e(b)})};var o=z.selectAll("circle").data(d);o.enter().append("circle").attr("id",function(a,b){return"circle_"+b}).attr("cy",2*c.margin.top/3).attr("r",c.legend.buttonRadius).style("fill",function(a,b){return u(b)}).style("stroke",function(a,b){return u(b)}).style("fill-opacity",function(a,c){return b[c]+.2}).on("click",function(a,b){l(b)}).on("mouseover",function(a,b){n(b)}).on("mouseout",function(a,b){n(b,!1)}),o.exit().remove(),o.transition().duration(c.duration).attr("cx",function(a,b){return f+c.legend.space*b});var s=z.selectAll("text").data(d);return s.enter().append("text").attr("y",2*c.margin.top/3).attr("dy","0.3em").text(function(a,b){return v(b)}).on("click",function(a,b){l(b)}).on("mouseover",function(a,b){n(b)}).on("mouseout",function(a,b){n(b,!1)}),s.exit().remove(),s.transition().duration(c.duration).attr("x",function(a,b){return f+c.legend.space*b+2*c.legend.buttonRadius}),this},this.legend=function(a){return $.extend(!0,c.legend,a),z.selectAll("circle").transition().duration(c.duration).attr("cx",function(a,b){return f+c.legend.space*b}).attr("r",c.legend.buttonRadius).style("fill",function(a,b){return u(b)}).style("stroke",function(a,b){return u(b)}),z.selectAll("text").text(function(a,b){return v(b)}).transition().duration(c.duration).attr("x",function(a,b){return f+c.legend.space*b+2*c.legend.buttonRadius}),A.selectAll("path.path").transition().duration(c.duration).style("fill","area"===c.type?function(a,b){return u(b)}:"none").style("stroke","area"!==c.type?function(a,b){return u(b)}:"none"),this},this.convert=function(a){return c.convert=a,x(),A.selectAll("path.path").data(d).transition().duration(c.duration).attr("d","area"===c.type?r:q),this},this.interpolate=function(a){return c.interpolate=a,r.interpolate(c.interpolate),q.interpolate(c.interpolate),A.selectAll("path.path").attr("d","area"===c.type?r:q),this},this.type=function(a){return c.type=a,s(),A.selectAll("path.path").style("stroke","area"!==c.type?function(a,b){return u(b)}:"none").style("fill","area"===c.type?function(a,b){return u(b)}:"none").transition().duration(c.duration).attr("d","area"===c.type?r:q),this},this.destroy=function(){d3.select("svg").remove()}}