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 9.0KB

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