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