1
2
3
4
5
|
/*!
* D3Evolution 2.0.0 (https://github.com/moisseev/D3Evolution)
* Copyright (c) 2016-2017, Alexander Moisseev, BSD 2-Clause
*/
function D3Evolution(t,e){"use strict";var l=$.extend(!0,{title:"",width:800,height:400,margin:{top:80,right:60,bottom:40,left:60},yAxisLabel:"",type:"line",yScale:"lin",duration:1250,interpolate:"curveLinear",legend:{buttonRadius:7,space:130,entries:[]}},e);const n={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 o=null,i=null,c=null,u=l.width-l.margin.left-l.margin.right,r=l.height-l.margin.top-l.margin.bottom,s=d3.scaleTime().range([0,u]),d=null,p=null;function a(){p="log"===l.yScale?(d=d3.scaleLog().clamp(!0).range([r,0]),d3.scaleLog().range([r-30,0])):(d=d3.scaleLinear().range([r,0])).copy()}a();function y(t){return void 0!==l.legend.entries[t]&&void 0!==l.legend.entries[t].color?l.legend.entries[t].color:H(t)}function f(t){return void 0!==l.legend.entries[t]&&void 0!==l.legend.entries[t].label?l.legend.entries[t].label:"path_"+t}var g=d3.axisBottom().scale(s),h=d3.axisLeft().scale(p).ticks(5),m=d3.axisBottom().tickFormat("").scale(s).tickSize(-r,0),v=d3.axisLeft().tickFormat("").scale(p).tickSize(-u,0),D=d3.scaleQuantize().range([r,0]),T=d3.area().x(function(t){return s(t.x)}).y0(function(){return r}).y1(function(t){return D(null===t.y)}).curve(d3.curveStep),x=d3.line().defined(function(t){return null!==t.y}).x(function(t){return s(t.x)}).y(function(t){return d(t.y)}).curve(n[l.interpolate]),A=d3.area().defined(function(t){return null!==t.y}).x(function(t){return s(t.x)}).y0(function(t){return d(t.y0)}).y1(function(t){return d(t.y0+t.y)}).curve(n[l.interpolate]),X=function(t){t.reduce(function(n,t){return t.forEach(function(t,e){t.y0=n.length?n[e].y+n[e].y0:0}),t},[])},H=d3.scaleOrdinal(d3.schemeCategory10),Q=function(t){var n=t.reduce(function(n,t){return t.map(function(t,e){return t.y+(n[e]||0)})},[]),t=$.extend(!0,[],t);return t.forEach(function(t){t.forEach(function(t,e){n[e]&&(t.y/=n[e])})}),t};function k(){if("log"===l.yScale){const e=d.invert(r);o.forEach(function(t){t.forEach(function(t){return 0===t.y?t.y:e})})}}var e=d3.select("#"+t).append("svg").classed("d3evolution",!0).attr("width",l.width).attr("height",l.height),b=e.append("g").attr("class","legend"),S=e.append("g").attr("width",u).attr("height",r).attr("transform","translate("+l.margin.left+", "+l.margin.top+")"),t=(S.append("g").attr("class","x grid").attr("transform","translate(0,"+r+")").call(m),S.append("g").attr("class","y grid").attr("transform","translate(0,0)").call(v),S.append("g").attr("class","x axis").attr("transform","translate(0,"+r+")").call(g),S.append("g").attr("class","y axis").attr("transform","translate(0,0)").call(h),d3.scaleOrdinal().domain([0]).range([r])),L=d3.axisLeft().scale(t),w=(S.append("g").attr("class","y-zero axis").call(L),S.append("text").attr("class","y label").attr("x",20-l.margin.left).attr("y",-20).style("opacity","percentage"===l.convert?0:1).text(l.yAxisLabel)),R=e.append("svg:text").attr("x",l.width/2).attr("y",l.margin.top/3).attr("text-anchor","middle"),t=(R.append("tspan").attr("class","chart-title").text(l.title+" "),R.timeRange=R.append("tspan"),e.append("svg:text").attr("x",l.width-20).attr("y",l.margin.top/3).attr("text-anchor","end")),V=t.append("tspan").attr("class","cursor-time");t.append("svg:title").text("Current cursor position");const B=function(t){return d3.timeFormat("%Y-%m-%d %H:%M:%S")(new Date(t))};function C(e){var n=o.map(function(t){return t[e]}),t=n[0].x;return V.text(B(t)),b.selectAll("text.value").text(function(t,e){return null===n[e].y?null:d3.format("percentage"===l.convert?".2~%":".6~")(n[e].y)}),n}var M=null,O=null;function E(t){var e=d3.bisector(function(t){return t.x}).left,t=s.invert(d3.pointer(t)[0]),n=C(e(o[0],t)-1);M.selectAll(".x,.cursor circle").attr("transform","translate("+s(n[0].x)+",0)"),M.selectAll(".y").attr("transform",function(t,e){e=n[e];return"translate(0,"+(("area"===l.type?d(e.y0+e.y):d(e.y))||0)+")"}).style("display",function(t,e){return n[e].y?null:"none"})}function Y(){M.style("display","none"),C(O)}function j(){M.style("display",null)}S.append("rect").style("fill","none").style("pointer-events","all").attr("width",u).attr("height",r).on("mousemove",E).on("mouseout",Y).on("mouseover",j);function q(){o="percentage"===l.convert?(w.transition().duration(l.duration).style("opacity",0),Q(i)):(w.transition().duration(l.duration).style("opacity",1),i),O=i[0].length-1,z()}var F=S.append("g"),_=S.append("g"),z=((M=S.append("g").attr("class","cursor").style("pointer-events","none").style("display","none")).append("line").attr("class","x background").attr("y1",0).attr("y2",r),M.append("line").attr("class","x foreground").attr("y1",0).attr("y2",r),function(){var t=[];if(t="area"===l.type?(X(o),"log"===l.yScale?d3.extent(d3.merge(o),function(t){return t.y0+t.y===0?null:t.y0+t.y}):d3.extent(d3.merge(o),function(t){return t.y0+t.y})):"log"===l.yScale?d3.extent(d3.merge(o),function(t){return 0===t.y?null:t.y}):d3.extent(d3.merge(o),function(t){return t.y}),"log"===l.yScale?(void 0===t[0]?t=[.0095,.0105]:t[0]===t[1]&&(t[0]*=.9),p.domain([t[0],t[1]]),e=p.invert(r),d.domain([e,t[1]])):(d.domain([0<t[0]?0:t[0],t[1]]),p.domain(d.domain())),"percentage"===l.convert){var a={y:r};const i=d3.format(".0%");L.tickFormat(i),h.tickFormat("log"===l.yScale?function(t){return t=t,e=a,n=i,r=Math.pow(10,Math.round(Math.log(t)/Math.LN10)),Math.abs(r-t)<1e-6||!(Math.abs(d(r)-d(t))<15||e.y-d(t)<15)?(e.y=d(t),n(t)):"";var e,n,r}:i)}else L.tickFormat(null),h.tickFormat(null);h.tickValues(p.ticks().length?null:[t[0],t[1]]);var e=d3.transition().duration(l.duration);S.select(".y.grid").transition(e).call(v.scale(p)),S.select(".y.axis").transition(e).call(h.scale(p)),S.select(".y-zero.axis").call(L)});function G(){b.selectAll("g").transition().duration(l.duration).attr("transform",function(t,e){return"translate("+(c+l.legend.space*e+2*l.legend.buttonRadius)+","+2*l.margin.top/3+")"})}var N=[];this.data=function(t){var e=e=>{e.on("click",t=>{t=e.nodes().indexOf(t.currentTarget);N[t]=0===N[t]?1:0,d3.select("#circle_"+t).transition().duration(l.duration).style("fill-opacity",N[t]+.2),d3.select("#path_"+t).transition().duration(l.duration).style("opacity",N[t])})};function r(e,n){function r(t){return!1===n?N[t]:t===e?1:0===N[t]?0:.4}d3.select("#circle_"+e).attr("r",l.legend.buttonRadius*(!1===n?1:1.3)),_.selectAll("path.path").style("opacity",function(t,e){return r(e)}).style("fill-opacity",function(t,e){return r(e)})}i=$.extend(!0,[],t),c=l.width-l.margin.right-l.legend.space*i.length,i.forEach(function(t){t.forEach(function(t){t.x*=1e3})});var t=d3.extent(d3.merge(i),function(t){return t.x}),t=(s.domain([t[0],t[1]]),R.timeRange.text("[ "+B(t[0])+" / "+B(t[1])+" ]"),F.selectAll("path.path-null").data(i)),t=(t.enter().append("path").attr("class","path-null"),F.selectAll("path.path-null").transition().duration(l.duration/2).style("opacity",0).on("end",function(){F.selectAll("path.path-null").attr("d",T).transition().duration(l.duration/2).style("opacity",1)}),t.exit().remove(),q(),k(),_.selectAll("path.path").data(o)),t=(e(t.enter().append("path").merge(t).attr("class","path").attr("id",function(t,e){return"path_"+e}).on("mousemove",E).on("mouseover",function(t,e,n){r(n),j()}).on("mouseout",function(t,e,n){r(n,!1),Y()})),t.exit().remove(),t=_.selectAll("path.path"),"area"===l.type?t.style("fill",function(t,e){return y(e)}).style("stroke","none").style("fill-opacity",function(t,e){return N[e]}):t.style("fill","none").style("stroke",function(t,e){return y(e)}).style("opacity",function(t,e){return N[e]}),t.transition().duration(l.duration).attr("d","area"===l.type?A:x),d3.transition().duration(l.duration)),t=(S.select(".x.grid").transition(t).call(m.scale(s)),S.select(".x.axis").transition(t).call(g.scale(s)),M.selectAll(".y").data(o)),n=t.enter().append("g").attr("class","y").style("stroke",function(t,e){return y(e)}),n=(n.append("circle").attr("class","background"),n.append("circle").attr("class","foreground"),n.selectAll("circle").attr("r",7).style("fill","none"),n.append("line").attr("class","background"),n.append("line").attr("class","foreground"),n.selectAll("line").attr("x1",0).attr("x2",u),t.exit().remove(),b.selectAll("circle").data(o)),t=(e(n.enter().append("circle").attr("id",function(t,e){return"circle_"+e}).attr("cy",2*l.margin.top/3).attr("r",l.legend.buttonRadius).style("fill",function(t,e){return y(e)}).style("stroke",function(t,e){return y(e)}).style("fill-opacity",function(t,e){return N[e]+.2}).on("mouseover",function(t,e,n){r(n)}).on("mouseout",function(t,e,n){r(n,!1)})),n.exit().remove(),b.selectAll("circle").transition().duration(l.duration).attr("cx",function(t,e){return c+l.legend.space*e}),b.selectAll("g").data(o)),n=t.enter().append("g"),a=(e(n.append("text").attr("class","name").attr("dy","0.3em").text(function(t,e){return f(e)}).on("mouseover",function(t,e,n){r(n)}).on("mouseout",function(t,e,n){r(n,!1)})),n.append("text").attr("class","value").attr("dy","20"),t.exit().remove(),G(),b.selectAll("text.value"));return a.transition("opacity").duration(l.duration/2).style("opacity",0).on("end",function(){C(O),a.transition("opacity").duration(l.duration/2).style("opacity",1)}),this},this.legend=function(t){return $.extend(!0,l.legend,t),b.selectAll("circle").transition().duration(l.duration).attr("cx",function(t,e){return c+l.legend.space*e}).attr("r",l.legend.buttonRadius).style("fill",function(t,e){return y(e)}).style("stroke",function(t,e){return y(e)}),b.selectAll("text.name").text(function(t,e){return f(e)}),G(),_.selectAll("path.path").transition().duration(l.duration).style("fill","area"===l.type?function(t,e){return y(e)}:"none").style("stroke","area"!==l.type?function(t,e){return y(e)}:"none"),M.selectAll(".y").style("stroke",function(t,e){return y(e)}),this},this.convert=function(t){return l.convert=t,q(),C(O),_.selectAll("path.path").data(o).transition().duration(l.duration).attr("d","area"===l.type?A:x),this},this.interpolate=function(t){return l.interpolate=t,A.curve(n[l.interpolate]),x.curve(n[l.interpolate]),_.selectAll("path.path").attr("d","area"===l.type?A:x),this},this.type=function(t){return l.type=t,z(),_.selectAll("path.path").style("stroke","area"!==l.type?function(t,e){return y(e)}:"none").style("fill","area"===l.type?function(t,e){return y(e)}:"none").transition().duration(l.duration).attr("d","area"===l.type?A:x),this},this.yAxisLabel=function(t){return l.yAxisLabel=t,w.transition().duration(l.duration/2).style("opacity",0).on("end",function(){w.text(l.yAxisLabel).transition().duration(l.duration/2).style("opacity",1)}),this},this.yScale=function(t){return l.yScale=t,a(),k(),z(),_.selectAll("path.path").transition().duration(l.duration).attr("d","area"===l.type?A:x),this},this.destroy=function(){d3.select("svg").remove()}}
|
