1
2
3
4
5
|
/*!
* D3Evolution 1.0.0 (https://github.com/moisseev/D3Evolution)
* Copyright (c) 2016-2017, Alexander Moisseev, BSD 2-Clause
*/
;function D3Evolution(s,e){var o=$.extend(true,{title:"",width:800,height:400,margin:{top:80,right:60,bottom:40,left:60},yAxisLabel:"",type:"line",duration:1250,interpolate:"curveLinear",legend:{buttonRadius:7,space:130,entries:[]}},e);const k={curveLinear:d3.curveLinear,curveStep:d3.curveStep,curveStepBefore:d3.curveStepBefore,curveStepAfter:d3.curveStepAfter,curveMonotoneX:d3.curveMonotoneX,curveBasis:d3.curveBasis,curveBasisOpen:d3.curveBasisOpen,curveBundle:d3.curveBundle,curveCardinal:d3.curveCardinal,curveCardinalOpen:d3.curveCardinalOpen,curveCatmullRom:d3.curveCatmullRom,curveCatmullRomOpen:d3.curveCatmullRomOpen,curveNatural:d3.curveNatural};var C;var z;var l;var t=o.width-o.margin.left-o.margin.right;var r=o.height-o.margin.top-o.margin.bottom;var E=d3.scaleTime().range([0,t]);var d=d3.scaleLinear().range([r,0]);var i=d3.axisBottom().scale(E);var a=d3.axisLeft().scale(d).ticks(5);var n=d3.axisBottom().tickFormat("").scale(E).tickSize(-r,0);var F=d3.axisLeft().tickFormat("").scale(d).tickSize(-t,0);var m=d3.scaleQuantize().range([r,0]);var p=d3.area().x(function(g){return E(g.x)}).y0(function(g){return r}).y1(function(g){return m(g.y==null)}).curve(d3.curveStep);var j=d3.line().defined(function(g){return g.y!=null}).x(function(g){return E(g.x)}).y(function(g){return d(g.y)}).curve(k[o.interpolate]);var y=d3.area().defined(function(g){return g.y!=null}).x(function(g){return E(g.x)}).y0(function(g){return d(g.y0)}).y1(function(g){return d(g.y0+g.y)}).curve(k[o.interpolate]);var B=function(g){g.reduce(function(G,H){H.map(function(J,I){J.y0=(G.length?G[I].y+G[I].y0:0)});return H},[])};var h=function(){var g;if(o.type==="area"){B(C);g=d3.extent(d3.merge(C),function(H){return H.y0+H.y})}else{g=d3.extent(d3.merge(C),function(H){return H.y})}d.domain([(g[0]>0)?0:g[0],g[1]]);const G=d3.transition().duration(o.duration);x.select(".y.grid").transition(G).call(F.scale(d));x.select(".y.axis").transition(G).call(a.scale(d))};var A=d3.scaleOrdinal(d3.schemeCategory10);var b=function(g){return(o.legend.entries[g]!==undefined&&o.legend.entries[g].color!==undefined)?o.legend.entries[g].color:A(g)};var w=function(g){return(o.legend.entries[g]!==undefined&&o.legend.entries[g].label!==undefined)?o.legend.entries[g].label:"path_"+g};var f=function(g){var H=g.reduce(function(I,J){return J.map(function(L,K){return L.y+(I[K]?I[K]:0)})},[]);var G=$.extend(true,[],g);G.forEach(function(I){I.forEach(function(K,J){if(H[J]){K.y/=H[J]}})});return G};var v=function(){if(o.convert==="percentage"){a.tickFormat(d3.format(".0%"));u.transition().duration(o.duration).style("opacity",0);C=f(z)}else{a.tickFormat(null);u.transition().duration(o.duration).style("opacity",1);C=z}h()};var q=d3.select("#"+s).append("svg").classed("d3evolution",true).attr("width",o.width).attr("height",o.height);var c=q.append("g").attr("class","legend");var x=q.append("g").attr("width",t).attr("height",r).attr("transform","translate("+o.margin.left+", "+o.margin.top+")");x.append("g").attr("class","x grid").attr("transform","translate(0,"+r+")").call(n);x.append("g").attr("class","y grid").attr("transform","translate(0,0)").call(F);x.append("g").attr("class","x axis").attr("transform","translate(0,"+r+")").call(i);x.append("g").attr("class","y axis").attr("transform","translate(0,0)").call(a);var u=x.append("text").attr("class","y label").attr("x",20-o.margin.left).attr("y",-20).style("opacity",(o.convert==="percentage")?0:1).text(o.yAxisLabel);var D=q.append("svg:text").attr("x",(o.width/2)).attr("y",(o.margin.top/3)).attr("text-anchor","middle");D.append("tspan").attr("class","chart-title").text(o.title+" ");D.timeRange=D.append("tspan");this.data=function(K){z=$.extend(true,[],K);var H=[];l=o.width-o.margin.right-o.legend.space*z.length;z.forEach(function(Q){Q.forEach(function(R){R.x*=1000})});var L=d3.extent(d3.merge(z),function(Q){return Q.x});E.domain([L[0],L[1]]);const P=function(Q){return d3.timeFormat("%Y-%m-%d %H:%M:%S")(new Date(Q))};D.timeRange.text("[ "+P(L[0])+" / "+P(L[1])+" ]");var M=x.selectAll("path.path-null").data(z);M.enter().append("path").attr("class","path-null");x.selectAll("path.path-null").transition().duration(o.duration/2).style("opacity",0).on("end",function(){x.selectAll("path.path-null").attr("d",p).transition().duration(o.duration/2).style("opacity",1)});M.exit().remove();v();var O=x.selectAll("path.path").data(C);O.enter().append("path").merge(O).attr("class","path").attr("id",function(R,Q){return"path_"+Q}).on("click",function(R,Q){J(Q)}).on("mouseover",function(R,Q){g(Q)}).on("mouseout",function(R,Q){g(Q,false)});O.exit().remove();O=x.selectAll("path.path");if(o.type==="area"){O.style("fill",function(R,Q){return b(Q)}).style("stroke","none").style("fill-opacity",function(R,Q){return H[Q]})}else{O.style("fill","none").style("stroke",function(R,Q){return b(Q)}).style("opacity",function(R,Q){return H[Q]})}O.transition().duration(o.duration).attr("d",(o.type==="area")?y:j);const N=d3.transition().duration(o.duration);x.select(".x.grid").transition(N).call(n.scale(E));x.select(".x.axis").transition(N).call(i.scale(E));var J=function(Q){H[Q]=(H[Q]!=0)?0:1;d3.select("#circle_"+Q).transition().duration(o.duration).style("fill-opacity",H[Q]+0.2);d3.select("#path_"+Q).transition().duration(o.duration).style("opacity",H[Q])};const g=function(R,Q){d3.select("#circle_"+R).attr("r",o.legend.buttonRadius*(Q===false?1:1.3));const S=function(T){if(Q===false){return H[T]}return(T===R)?1:(H[T]==0)?0:0.4};x.selectAll("path.path").style("opacity",function(U,T){return S(T)}).style("fill-opacity",function(U,T){return S(T)})};var I=c.selectAll("circle").data(C);I.enter().append("circle").attr("id",function(R,Q){return"circle_"+Q}).attr("cy",o.margin.top*2/3).attr("r",o.legend.buttonRadius).style("fill",function(R,Q){return b(Q)}).style("stroke",function(R,Q){return b(Q)}).style("fill-opacity",function(R,Q){return H[Q]+0.2}).on("click",function(R,Q){J(Q)}).on("mouseover",function(R,Q){g(Q)}).on("mouseout",function(R,Q){g(Q,false)});I.exit().remove();c.selectAll("circle").transition().duration(o.duration).attr("cx",function(R,Q){return l+o.legend.space*Q});var G=c.selectAll("text").data(C);G.enter().append("text").attr("y",o.margin.top*2/3).attr("dy","0.3em").text(function(R,Q){return w(Q)}).on("click",function(R,Q){J(Q)}).on("mouseover",function(R,Q){g(Q)}).on("mouseout",function(R,Q){g(Q,false)});G.exit().remove();c.selectAll("text").transition().duration(o.duration).attr("x",function(R,Q){return l+o.legend.space*Q+2*o.legend.buttonRadius});return this};this.legend=function(g){$.extend(true,o.legend,g);c.selectAll("circle").transition().duration(o.duration).attr("cx",function(H,G){return l+o.legend.space*G}).attr("r",o.legend.buttonRadius).style("fill",function(H,G){return b(G)}).style("stroke",function(H,G){return b(G)});c.selectAll("text").text(function(H,G){return w(G)}).transition().duration(o.duration).attr("x",function(H,G){return l+o.legend.space*G+2*o.legend.buttonRadius});x.selectAll("path.path").transition().duration(o.duration).style("fill",(o.type==="area")?function(H,G){return b(G)}:"none").style("stroke",(o.type!=="area")?function(H,G){return b(G)}:"none");return this};this.convert=function(g){o.convert=g;v();x.selectAll("path.path").data(C).transition().duration(o.duration).attr("d",(o.type==="area")?y:j);return this};this.interpolate=function(g){o.interpolate=g;y.curve(k[o.interpolate]);j.curve(k[o.interpolate]);x.selectAll("path.path").attr("d",(o.type==="area")?y:j);return this};this.type=function(g){o.type=g;h();x.selectAll("path.path").style("stroke",(o.type!=="area")?function(H,G){return b(G)}:"none").style("fill",(o.type==="area")?function(H,G){return b(G)}:"none").transition().duration(o.duration).attr("d",(o.type==="area")?y:j);return this};this.yAxisLabel=function(g){o.yAxisLabel=g;u.transition().duration(o.duration/2).style("opacity",0).on("end",function(){u.text(o.yAxisLabel).transition().duration(o.duration/2).style("opacity",1)});return this};this.destroy=function(){d3.select("svg").remove()}};
|
