From d2ea233840e74d64ab0a1aa06c4e448e752fd2c3 Mon Sep 17 00:00:00 2001 From: Masayuki Tanaka Date: Fri, 21 Feb 2014 13:15:56 +0900 Subject: [PATCH] Fix transition --- c3.js | 220 ++++++++++++++++++++++++++++++++++-------------------- c3.min.js | 177 +++++++++++++++++++++---------------------- 2 files changed, 226 insertions(+), 171 deletions(-) diff --git a/c3.js b/c3.js index 682895e..f5faffd 100644 --- a/c3.js +++ b/c3.js @@ -241,9 +241,13 @@ }; height3 = currentHeight - margin3.top - margin3.bottom; + // for arc + updateRadius(); + } + function updateRadius() { radiusExpanded = height / 2; radius = radiusExpanded * 0.95; - innerRadius = hasDountType(c3.data.targets) ? radius * 0.6 : 0; + innerRadius = hasDonutType(c3.data.targets) ? radius * 0.6 : 0; } function getCurrentWidth() { return __size_width === null ? getParentWidth() : __size_width; @@ -321,11 +325,13 @@ yAxis2 = getYAxis(y2, y2Orient); subXAxis = getXAxis(subX, subXOrient); // update for arc + updateArc(); + } + function updateArc() { svgArc = getSvgArc(); svgArcExpanded = getSvgArcExpanded(); svgArcExpandedSub = getSvgArcExpanded(0.98); } - function getX(min, max, domain, offset) { var scale = ((isTimeSeries) ? d3.time.scale() : d3.scale.linear()).range([min, max]); // Set function and values for c3 @@ -459,7 +465,7 @@ .transition().duration(100) .attr("d", svgArcExpandedSub) .each(function (d) { - if (isDountType(d.data)) { + if (isDonutType(d.data)) { // callback here } }); @@ -1033,6 +1039,7 @@ var targetIds = isUndefined(targets) ? getTargetIds() : targets; if (typeof targetIds === 'string') { targetIds = [targetIds]; } for (var i = 0; i < targetIds.length; i++) { + withoutFadeIn[targetIds[i]] = (type === __data_types[targetIds[i]]); __data_types[targetIds[i]] = type; } } @@ -1044,6 +1051,10 @@ }); return has; } + function initialOpacity(d) { + return withoutFadeIn[d.id] ? 1 : 0; + } + /* not used function hasLineType(targets) { return hasType(targets, 'line'); @@ -1058,11 +1069,11 @@ function hasPieType(targets) { return hasType(targets, 'pie'); } - function hasDountType(targets) { - return hasType(targets, 'dount'); + function hasDonutType(targets) { + return hasType(targets, 'donut'); } function hasArcType(targets) { - return hasPieType(targets) || hasDountType(targets); + return hasPieType(targets) || hasDonutType(targets); } function isLineType(d) { var id = (typeof d === 'string') ? d : d.id; @@ -1084,12 +1095,12 @@ var id = (typeof d === 'string') ? d : d.id; return __data_types[id] === 'pie'; } - function isDountType(d) { + function isDonutType(d) { var id = (typeof d === 'string') ? d : d.id; - return __data_types[id] === 'dount'; + return __data_types[id] === 'donut'; } function isArcType(d) { - return isPieType(d) || isDountType(d); + return isPieType(d) || isDonutType(d); } /* not used function lineData(d) { @@ -1280,6 +1291,41 @@ }; })(); + var drawBar = function (barIndices, isSub_) { + var barTargetsNum = barIndices.__max__ + 1, + isSub = arguments.length > 1 ? isSub_ : true, + barW = getBarW(xAxis, barTargetsNum, !!isSub), + x = getBarX(barW, barTargetsNum, barIndices, !!isSub), + y = getBarY(!!isSub), + barOffset = getBarOffset(barIndices, !!isSub), + yScale = isSub ? getSubYScale : getYScale; + + return function (d, i) { + var y0 = yScale(d.id)(0), + offset = barOffset(d, i) || y0; // offset is for stacked bar chart + + // 4 points that make a bar + var points = [ + [x(d), offset], + [x(d), y(d) - (y0 - offset)], + [x(d) + barW, y(d) - (y0 - offset)], + [x(d) + barW, offset] + ]; + + // switch points if axis is rotated, not applicable for sub chart + var indexX = __axis_rotated ? 1 : 0; + var indexY = __axis_rotated ? 0 : 1; + + var path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' + + 'L' + points[1][indexX] + ',' + points[1][indexY] + ' ' + + 'L' + points[2][indexX] + ',' + points[2][indexY] + ' ' + + 'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' + + 'z'; + + return path; + }; + }; + // For brush region var lineOnSub = (function () { var line = d3.svg.line() @@ -1394,6 +1440,9 @@ // for brush area culculation var orgXDomain; + // for save value + var orgAreaOpacity, withoutFadeIn = {}; + function init(data) { var eventRect, grid, xgridLines, ygridLines; var i; @@ -1662,7 +1711,7 @@ updateTargets(c3.data.targets); // Draw with targets - redraw({withTransition: false, withUpdateXDomain: true}); + redraw({withTransform: true, withUpdateXDomain: true}); // Show tooltip if needed if (__tooltip_init_show) { @@ -1954,9 +2003,9 @@ function redraw(options) { var xgrid, xgridData, xgridLines, ygrid, ygridLines; var mainCircle, mainBar, mainRegion, contextBar, eventRectUpdate; - var barIndices = getBarIndices(), barTargetsNum = barIndices.__max__ + 1, maxDataCountTarget; + var barIndices = getBarIndices(), maxDataCountTarget; var rectX, rectW; - var withY, withSubchart, withTransition, withUpdateXDomain, withUpdateOrgXDomain; + var withY, withSubchart, withTransition, withTransform, withUpdateXDomain, withUpdateOrgXDomain; var hideAxis = hasArcType(c3.data.targets); var duration; @@ -1964,10 +2013,11 @@ withY = isDefined(options.withY) ? options.withY : true; withSubchart = isDefined(options.withSubchart) ? options.withSubchart : true; withTransition = isDefined(options.withTransition) ? options.withTransition : true; + withTransform = isDefined(options.withTransform) ? options.withTransform : false; withUpdateXDomain = isDefined(options.withUpdateXDomain) ? options.withUpdateXDomain : false; withUpdateOrgXDomain = isDefined(options.withUpdateOrgXDomain) ? options.withUpdateOrgXDomain : false; - duration = withTransition ? 250 : 0; + duration = withTransition ? 350 : 0; if (withUpdateOrgXDomain) { x.domain(d3.extent(getXDomain(c3.data.targets))); @@ -1986,9 +2036,9 @@ y2.domain(getYDomain('y2')); // axis - main.select(".x.axis").transition().duration(__axis_rotated ? duration : 0).call(__axis_rotated ? yAxis : xAxis).style("opacity", hideAxis ? 0 : 1); - main.select(".y.axis").transition().duration(__axis_rotated ? 0 : duration).call(__axis_rotated ? xAxis : yAxis).style("opacity", hideAxis ? 0 : 1); - main.select(".y2.axis").transition().call(yAxis2).style("opacity", hideAxis ? 0 : 1); + main.select(".x.axis").style("opacity", hideAxis ? 0 : 1).transition().duration(__axis_rotated ? duration : 0).call(__axis_rotated ? yAxis : xAxis); + main.select(".y.axis").style("opacity", hideAxis ? 0 : 1).transition().duration(__axis_rotated ? 0 : duration).call(__axis_rotated ? xAxis : yAxis); + main.select(".y2.axis").style("opacity", hideAxis ? 0 : 1).transition().call(yAxis2); // Update label position main.select(".x.axis .-axis-x-label").attr("x", width); @@ -2065,72 +2115,43 @@ } // bars - - var drawBar = function (isSub) { - var barW = getBarW(xAxis, barTargetsNum, !!isSub), - x = getBarX(barW, barTargetsNum, barIndices, !!isSub), - y = getBarY(!!isSub), - barOffset = getBarOffset(barIndices, !!isSub), - yScale = isSub ? getSubYScale : getYScale; - - return function (d, i) { - var y0 = yScale(d.id)(0), - offset = barOffset(d, i) || y0; // offset is for stacked bar chart - - // 4 points that make a bar - var points = [ - [x(d), offset], - [x(d), y(d) - (y0 - offset)], - [x(d) + barW, y(d) - (y0 - offset)], - [x(d) + barW, offset] - ]; - - // switch points if axis is rotated, not applicable for sub chart - var indexX = __axis_rotated ? 1 : 0; - var indexY = __axis_rotated ? 0 : 1; - - var path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' + - 'L' + points[1][indexX] + ',' + points[1][indexY] + ' ' + - 'L' + points[2][indexX] + ',' + points[2][indexY] + ' ' + - 'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' + - 'z'; - - return path; - }; - }; - mainBar = main.selectAll('.-bars').selectAll('.-bar') .data(barData); - mainBar.enter().append('path') - .attr('d', drawBar(false)) + .attr('d', drawBar(barIndices, false)) .style("stroke", 'none') .style("opacity", 0) .style("fill", function (d) { return color(d.id); }) .attr("class", classBar); - mainBar - .transition().duration(duration) - .attr('d', drawBar(false)) + .style("opacity", initialOpacity) + .transition().duration(duration) + .attr('d', drawBar(barIndices, false)) .style("opacity", 1); - mainBar.exit().transition().duration(duration) .style('opacity', 0) .remove(); // lines and cricles - main.selectAll('.chart-line').select('.-line') + main.selectAll('.-line') + .style("opacity", initialOpacity) .transition().duration(duration) - .attr("d", lineOnMain); + .attr("d", lineOnMain) + .style("opacity", 1); main.selectAll('.-area') - .transition().duration(duration) - .attr("d", areaOnMain); + .style("opacity", 0) + .transition().duration(duration) + .attr("d", areaOnMain) + .style("opacity", orgAreaOpacity); mainCircle = main.selectAll('.-circles').selectAll('.-circle') .data(lineOrScatterData); mainCircle.enter().append("circle") .attr("class", classCircle) + .style('opacity', 0) .attr("r", __point_r); - mainCircle.transition().duration(duration) + mainCircle + .style("opacity", initialOpacity) + .transition().duration(duration) .style('opacity', opacityCircle) .attr("cx", __axis_rotated ? circleY : circleX) .attr("cy", __axis_rotated ? circleX : circleY); @@ -2138,6 +2159,7 @@ // arc main.selectAll('.chart-arc').select('.-arc') + .attr("transform", withTransform ? "scale(0)" : "") .style("opacity", function (d) { return d === this._current ? 0 : 1; }) .transition().duration(duration) .attrTween("d", function (d) { @@ -2157,13 +2179,16 @@ this._current = i(0); return function (t) { return getArc(i(t), true); }; }) + .attr("transform", withTransform ? "scale(1)" : "") .style("opacity", 1); main.selectAll('.chart-arc').select('text') .attr("transform", transformForArcLable) - .attr("opacity", 0) + .style("opacity", 0) .transition().duration(duration) .text(textForArcLable) - .attr("opacity", function (d) { return isArcType(d.data) ? 1 : 0; }); + .style("opacity", function (d) { return isArcType(d.data) ? 1 : 0; }); + main.select('.chart-arcs-title') + .style("opacity", hasDonutType(c3.data.targets) ? 1 : 0); // subchart if (__subchart_show) { @@ -2174,7 +2199,7 @@ // update subchart elements if needed if (withSubchart) { // axes - context.select('.x.axis').transition().duration(__axis_rotated ? duration : 0).call(subXAxis); + context.select('.x.axis').style("opacity", hideAxis ? 0 : 1).transition().duration(__axis_rotated ? duration : 0).call(subXAxis); // extent rect if (!brush.empty()) { brush.extent(x.orgDomain()).update(); @@ -2183,22 +2208,24 @@ contextBar = context.selectAll('.-bars').selectAll('.-bar') .data(barData); contextBar.enter().append('path') - .attr('d', drawBar(true)) + .attr('d', drawBar(barIndices)) .style("stroke", 'none') .style("fill", function (d) { return color(d.id); }) .attr("class", classBar); contextBar - .style("opacity", 0) - .transition().duration(duration) - .attr('d', drawBar(true)) + .style("opacity", initialOpacity) + .transition().duration(duration) + .attr('d', drawBar(barIndices)) .style('opacity', 1); contextBar.exit().transition().duration(duration) .style('opacity', 0) .remove(); // lines context.selectAll('.-line') - .transition().duration(duration) - .attr("d", lineOnSub); + .style("opacity", initialOpacity) + .transition().duration(duration) + .attr("d", lineOnSub) + .style('opacity', 1); } } @@ -2273,6 +2300,11 @@ mainRegion.exit().transition().duration(duration) .style("fill-opacity", 0) .remove(); + + // update fadein condition + getTargetIds().forEach(function (id) { + withoutFadeIn[id] = true; + }); } function redrawForBrush() { redraw({ @@ -2356,14 +2388,12 @@ .data(targets); mainBarEnter = mainBarUpdate.enter().append('g') .attr('class', function (d) { return 'chart-bar target target-' + d.id; }) - .style("pointer-events", "none") - .style('opacity', 0); + .style("pointer-events", "none"); // Bars for each data mainBarEnter.append('g') .attr("class", classBars) .style("fill", function (d) { return color(d.id); }) - .style("stroke", function (d) { return color(d.id); }) - .style("stroke-width", 0) + .style("stroke", "none") .style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; }); //-- Line --// @@ -2372,15 +2402,16 @@ .data(targets); mainLineEnter = mainLineUpdate.enter().append('g') .attr('class', function (d) { return 'chart-line target target-' + d.id; }) - .style("pointer-events", "none") - .style('opacity', 0); + .style("pointer-events", "none"); // Lines for each data mainLineEnter.append("path") .attr("class", classLine) + .style("opacity", 0) .style("stroke", function (d) { return color(d.id); }); // Areas mainLineEnter.append("path") .attr("class", classArea) + .style("opacity", function () { orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }) .style("fill", function (d) { return color(d.id); }); // Circles for each data point on lines mainLineEnter.append('g') @@ -2399,15 +2430,14 @@ //mainLineUpdate.exit().remove(); //-- Pie --// - mainPieUpdate = main.select('.chart-arcs') .selectAll(".chart-arc") .data(pie(targets)); mainPieEnter = mainPieUpdate.enter().append("g") - .attr("class", function (d) { return 'chart-arc target target-' + d.data.id; }) - .style('opacity', 0); + .attr("class", function (d) { return 'chart-arc target target-' + d.data.id; }); mainPieEnter.append("path") .attr("class", classArc) + .style("opacity", 0) .style("fill", function (d) { return color(d.data.id); }) .style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; }) .each(function (d) { this._current = d; }) @@ -2421,6 +2451,7 @@ }); mainPieEnter.append("text") .attr("dy", ".35em") + .style("opacity", 0) .style("text-anchor", "middle") .style("pointer-events", "none"); // MEMO: can not keep same color..., but not bad to update color in redraw @@ -2434,8 +2465,7 @@ .selectAll('.chart-bar') .data(targets); contextBarEnter = contextBarUpdate.enter().append('g') - .attr('class', function (d) { return 'chart-bar target target-' + d.id; }) - .style('opacity', 0); + .attr('class', function (d) { return 'chart-bar target target-' + d.id; }); // Bars for each data contextBarEnter.append('g') .attr("class", classBars) @@ -2446,11 +2476,11 @@ .selectAll('.chart-line') .data(targets); contextLineEnter = contextLineUpdate.enter().append('g') - .attr('class', function (d) { return 'chart-line target target-' + d.id; }) - .style('opacity', 0); + .attr('class', function (d) { return 'chart-line target target-' + d.id; }); // Lines for each data contextLineEnter.append("path") .attr("class", classLine) + .style("opacity", 0) .style("stroke", function (d) { return color(d.id); }); } @@ -2766,6 +2796,30 @@ redraw(); }; + c3.toArea = function (targets) { + setTargetType(targets, 'area'); + redraw(); + }; + + c3.toAreaSpline = function (targets) { + setTargetType(targets, 'area-spline'); + redraw(); + }; + + c3.toPie = function (targets) { + setTargetType(targets, 'pie'); + updateRadius(); + updateArc(); + redraw({withTransform: true}); + }; + + c3.toDonut = function (targets) { + setTargetType(targets, 'donut'); + updateRadius(); + updateArc(); + redraw({withTransform: true}); + }; + c3.groups = function (groups) { if (isUndefined(groups)) { return __data_groups; } __data_groups = groups; diff --git a/c3.min.js b/c3.min.js index 77adad4..4b4dd69 100644 --- a/c3.min.js +++ b/c3.min.js @@ -1,88 +1,89 @@ -(function(O){function nd(){function u(d,f){d.attr("transform",function(d){return"translate("+(f(d)+ba)+", 0)"})}function x(d,f){d.attr("transform",function(d){return"translate(0,"+f(d)+")"})}function O(d){var f=d[0];d=d[d.length-1];return fa?a:0}),c=1;c+a||(b[e][c]+=+a)});return d.max(Object.keys(b).map(function(a){return d.max(b[a])}))}function mb(a){var b=nb(function(b){return y(b.id)===a}),c="y2"===a?Ad:Bd,e="y2"===a?Cd:Dd,c=c?c:xd(b),e=e?e:yd(b),k=0.1*Math.abs(e-c),d=k,f=k,g="y2"===a?Ed:Fd;g&&(c=Math.max(Math.abs(c),Math.abs(e)),e=c-g,c=g-c);"y"===a&&Ia&&(d=Ia.top?Ia.top:k,f=Ia.bottom?Ia.bottom:k);"y2"===a&&Ja&&(d=Ja.top?Ja.top:k,f=Ja.bottom? -Ja.bottom:k);la(b,"bar")&&!uc(b)&&(f=c);return[c-f,e+d]}function Gd(a){return d.min(a,function(a){return d.min(a.values,function(a){return a.x})})}function Hd(a){return d.max(a,function(a){return d.max(a.values,function(a){return a.x})})}function ob(a){var b=[Gd(a),Hd(a)];a=b[0];var b=b[1],c=da?0:0.01*Math.abs(a-b);a=B?new Date(a.getTime()-c):a-c;b=B?new Date(b.getTime()+c):b+c;return[a,b]}function ta(a){return a[1]-a[0]}function Id(a){for(var b=0;ba?0:a}function xc(a){return na&&a===na||Z&&Kd(Z,a)}function Ld(a){return!xc(a)}function Md(a){Object.keys(a).forEach(function(b){Z[b]=a[b]})}function qb(a){var b;a&&(b=Ka[a.id],a.name=b?b:a.id);return a}function yc(a){var b=a[0],c={},e=[],k,d;for(k=1;kb&&(c=a,b=a.values.length)}):c=a?h.data.targets[0]:null;return c}function rb(a){a=x(a)?h.data.targets: -a;return a.map(function(a){return a.id})}function Cc(a){var b=rb(),c;for(c=0;ca})} -function zd(a){return Dc(a,function(a){return 0k&&(d-=c+30)),c=b[1]+15+et[c].indexOf(k.id)))for(e=0;e=f;f+=r)h+=e(a[d-1],a[d],f,za)}return h}function Xb(a){var b;tb=d.select(sa);if(tb.empty())O.alert('No bind element found. Check the selector specified by "bindto" and existance of that element. Default "bindto" is "#chart".');else{tb.html("");h.data.x={};h.data.targets=La(a);qa();Q();m.domain(d.extent(ob(h.data.targets)));z.domain(mb("y"));Y.domain(mb("y2"));U.domain(m.domain());hb.domain(z.domain());ib.domain(Y.domain());I.ticks(10>a.length?a.length:10);ua.ticks(ee).outerTickSize(0).tickFormat(fe); -jb.ticks(ge).outerTickSize(0).tickFormat(he);T=m.domain();K.scale(U);oa&&E.scale(m);p=d.select(sa).append("svg").attr("width",r+A+X).attr("height",s+n+N).on("mouseenter",ie).on("mouseleave",je);ub=p.append("defs");ub.append("clipPath").attr("id",Yb).append("rect").attr("y",n).attr("width",r).attr("height",s-n);ub.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x",-1-A).attr("y",-20).attr("width",M).attr("height",ca);ub.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x", --A+1).attr("y",n-1).attr("width",ha).attr("height",yb);l=p.append("g").attr("transform",L.main);F=Aa?p.append("g").attr("transform",L.context):null;Ba=Ca?p.append("g").attr("transform",L.legend):null;V=d.select(sa).style("position","relative").append("div").style("position","absolute").style("z-index","10").style("display","none");l.append("g").attr("class","x axis").attr("clip-path",g?"":"url(#xaxis-clip)").attr("transform",L.x).call(g?ua:I).append("text").attr("class","-axis-x-label").attr("x", -r).attr("dy","-.5em").style("text-anchor","end").text(ke);l.append("g").attr("class","y axis").attr("clip-path",g?"url(#yaxis-clip)":"").call(g?I:ua).append("text").attr("transform","rotate(-90)").attr("dy","1.2em").attr("dx","-.5em").style("text-anchor","end").text(le);Bb&&l.append("g").attr("class","y2 axis").attr("transform",L.y2).call(jb);a=l.append("g").attr("clip-path",Ra).attr("class","grid");cd&&a.append("g").attr("class","xgrids");Zb&&(b=a.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(Zb).enter().append("g").attr("class", -"xgrid-line"),b.append("line").attr("class",function(a){return""+a["class"]}),b.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform",g?"":"rotate(-90)").attr("dx",g?0:-n).attr("dy",-5).text(function(a){return a.text}));me&&a.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",g?0:-10).attr("x2",g?r:-10).attr("y1",g?-10:n).attr("y2",g?-10:s);dd&&a.append("g").attr("class","ygrids");$b&&(a=a.append("g").attr("class", -"ygrid-lines").selectAll("ygrid-line").data($b).enter().append("g").attr("class","ygrid-line"),a.append("line").attr("class",function(a){return""+a["class"]}),a.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform",g?"rotate(-90)":"").attr("dx",g?0:-n).attr("dy",-5).text(function(a){return a.text}));l.append("g").attr("clip-path",Ra).attr("class","regions");l.append("g").attr("clip-path",Ra).attr("class","chart");l.select(".chart").append("g").attr("class", -"event-rects").style("fill-opacity",0).style("cursor",oa?g?"ns-resize":"ew-resize":null);l.select(".chart").append("g").attr("class","chart-bars");l.select(".chart").append("g").attr("class","chart-lines");l.select(".chart").append("g").attr("class","chart-arcs").attr("transform",L.arc).append("text").attr("class","chart-arcs-title").style("text-anchor","middle").text(ne);if(oa)l.insert("rect",oe?null:"g.grid").attr("class","zoom-rect").attr("width",r).attr("height",s).style("opacity",0).style("cursor", -g?"ns-resize":"ew-resize").call(E).on("dblclick.zoom",null);null!==vb&&K.extent("function"!==typeof vb?vb:vb(ob()));Aa&&(F.append("g").attr("clip-path",Ra).attr("class","chart"),F.select(".chart").append("g").attr("class","chart-bars"),F.select(".chart").append("g").attr("class","chart-lines"),F.append("g").attr("clip-path",Ra).attr("class","x brush").call(K).selectAll("rect").attr(g?"width":"height",g?Cb:eb),F.append("g").attr("class","x axis").attr("transform",L.subx).attr("clip-path",g?"url(#yaxis-clip)": -"").call(gb));Ca&&wb(h.data.targets);ed(h.data.targets);H({withTransition:!1,withUpdateXDomain:!0});if(pe){if(B&&"string"===typeof Da){Da=ma(Da);for(a=0;aPb(c,a)?p.select(".event-rect").style("cursor","pointer"):p.select(".event-rect").style("cursor",null))}).on("click",function(){var a,c;D(h.data.targets)||(a=d.mouse(this),c=Nc(h.data.targets, -a),100>Pb(c,a)&&l.select(".-circles-"+c.id).select(".-circle-"+c.index).each(function(){gd(this,c,c.index)}))}).call(d.behavior.drag().origin(Object).on("drag",function(){hd(d.mouse(this))}).on("dragstart",function(){id(d.mouse(this))}).on("dragend",function(){jd()})).call(E).on("dblclick.zoom",null)}function gd(a,b,c){var e=d.select(a),f=e.classed(ga),g=!1,h;"circle"===a.nodeName?(g=Wc(a,1.5*Qa),h=Zc):"rect"===a.nodeName&&(g=Xc(a),h=ad);if(pa||g)ea&&fa(b)&&(e.classed(ga,!f),h(!f,e,b,c)),ue(b,e)} -function hd(a){var b,c,e,f,g,m,p;D(h.data.targets)||!ea||oa&&!E.altDomain||(b=dc[0],c=dc[1],e=a[0],a=a[1],f=Math.min(b,e),g=Math.max(b,e),m=pa?n:Math.min(c,a),p=pa?s:Math.max(c,a),l.select(".dragarea").attr("x",f).attr("y",m).attr("width",g-f).attr("height",p-m),l.selectAll(".-shapes").selectAll(".-shape").filter(function(a){return fa(a)}).each(function(a,b){var c=d.select(this),e=c.classed(ga),h=c.classed(ec),l,n,q,r;l=!1;"circle"===this.nodeName?(l=1*c.attr("cx"),n=1*c.attr("cy"),r=Zc,l=f", -c,d,f;for(c=0;c"+f+""+d+"");return b+""}),pe=f(["tooltip","init","show"],!1),Da=f(["tooltip","init","x"],0),fd=f(["tooltip","init","position"],{top:"0px",left:"50px"}),Yb=sa.replace("#","")+"-clip",Ra="url(#"+Yb+")",B="timeseries"=== -md,da="categorized"===md,Ob=!B&&(na||Z),dc=null,Sa=!1,cc=!1,ka=Ca?40:0,J=function(a,b){var c=[],d=null!==b?b:"#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf".split(" ");return function(b){if(b in a)return a[b];-1===c.indexOf(b)&&c.push(b);return d[c.indexOf(b)%d.length]}}(Ce,De),ud=function(){var a=[[d.time.format("%Y/%-m/%-d"),function(){return!0}],[d.time.format("%-m/%-d"),function(a){return a.getMonth()}],[d.time.format("%-m/%-d"),function(a){return 1!==a.getDate()}], -[d.time.format("%-m/%-d"),function(a){return a.getDay()&&1!==a.getDate()}],[d.time.format("%I %p"),function(a){return a.getHours()}],[d.time.format("%I:%M"),function(a){return a.getMinutes()}],[d.time.format(":%S"),function(a){return a.getSeconds()}],[d.time.format(".%L"),function(a){return a.getMilliseconds()}]];return function(b){for(var c=a.length-1,d=a[c];!d[1](b);)d=a[--c];return d[0](b)}}(),r,Cb,s,eb,zb,ra,Ga,Db,Eb,kb,qc,rc,Lb,Fb,Gb,Hb,Ib,Jb,Kb,m,z,Y,U,hb,ib,I,ua,jb,gb,pd=g?"left":"bottom", -qd=g?bb?"top":"bottom":bb?"right":"left",rd=g?db?"bottom":"top":db?"left":"right",sd=g?"left":"bottom",L={main:function(){return"translate("+A+","+n+")"},context:function(){return"translate("+Fa+","+Ea+")"},legend:function(){return"translate("+kc+","+jc+")"},y2:function(){return"translate("+(g?0:r)+","+(g?10:0)+")"},x:function(){return"translate(0,"+s+")"},subx:function(){return"translate(0,"+(g?0:eb)+")"},arc:function(){return"translate("+r/2+","+s/2+")"}},oc=40,nc=20;Lb=d.layout.pie().value(function(a){return a.values.reduce(function(a, -c){return a+c.value},0)});var we=function(){var a=d.svg.line().x(g?function(a){return w(a.id)(a.value)}:wa).y(g?wa:function(a){return w(a.id)(a.value)});return function(b){var c=Tb(b.values),d;if(Qb(b))return Tc(b)?a.interpolate("cardinal"):a.interpolate("linear"),ld[b.id]?de(c,m,w(b.id),ld[b.id]):a(c);d=m(c[0].x);b=w(b.id)(c[0].value);return g?"M "+b+" "+d:"M "+d+" "+b}}(),xe=function(){var a;a=g?d.svg.area().x0(function(a){return w(a.id)(0)}).x1(function(a){return w(a.id)(a.value)}).y(wa):d.svg.area().x(wa).y0(function(a){return w(a.id)(0)}).y1(function(a){return w(a.id)(a.value)}); -return function(b){var c=Tb(b.values),d;if(la([b],"area")||la([b],"area-spline"))return Tc(b)?a.interpolate("cardinal"):a.interpolate("linear"),a(c);d=m(c[0].x);b=w(b.id)(c[0].value);return g?"M "+b+" "+d:"M "+d+" "+b}}(),ye=function(){var a=d.svg.line().x(g?function(a){return G(a.id)(a.value)}:Jc).y(g?Jc:function(a){return G(a.id)(a.value)});return function(b){var c=Tb(b.values);return Qb(b)?a(c):"M "+U(c[0].x)+" "+G(b.id)(c[0].value)}}(),K=d.svg.brush().on("brush",function(){H({withTransition:!1, -withY:!1,withSubchart:!1,withUpdateXDomain:!0})}),E=d.behavior.zoom().on("zoomstart",function(){E.altDomain=d.event.sourceEvent.altKey?m.orgDomain():null}).on("zoom",oa?ze:null);K.update=function(){F&&F.select(".x.brush").call(this);return this};K.scale=function(a){return g?this.y(a):this.x(a)};E.scale=function(a){return g?this.y(a):this.x(a)};E.orgScaleExtent=function(){var a=kd?kd:[1,10];return[a[0],Math.max(fb()/a[1],a[1])]};E.updateScaleExtent=function(){var a=ta(m.orgDomain())/ta(T),b=this.orgScaleExtent(); -this.scaleExtent([b[0]*a,b[1]*a]);return this};var p,ub,l,F,Ba,V,tb,T;h.focus=function(a){var b=p.selectAll(Va(a)),c=b.filter(hc),b=b.filter(ic);h.revert();h.defocus();c.classed("focused",!0).transition().duration(100).style("opacity",1);b.transition().duration(100).style("opacity",1);D(h.data.targets)&&Za(a,!0);fc(a)};h.defocus=function(a){var b=p.selectAll(Va(a)),c=b.filter(hc),b=b.filter(ic);h.revert();c.classed("focused",!1).transition().duration(100).style("opacity",0.3);b.transition().duration(100).style("opacity", -0.3);D(h.data.targets)&&xb(a);Ae(a)};h.revert=function(a){var b=p.selectAll(Va(a)),c=b.filter(hc),b=b.filter(ic);c.classed("focused",!1).transition().duration(100).style("opacity",1);b.transition().duration(100).style("opacity",1);D(h.data.targets)&&xb(a);gc()};h.show=function(a){p.selectAll(Va(a)).transition().style("opacity",1)};h.hide=function(a){p.selectAll(Va(a)).transition().style("opacity",0)};h.unzoom=function(){K.clear().update();H({withUpdateXDomain:!0})};h.load=function(a){"function"!== -typeof a.done&&(a.done=function(){});a.xs&&Md(a.xs);"categories"in a&&da&&(Ha=a.categories,I.categories(Ha));if("cacheIds"in a&&Id(a.cacheIds))Ta(Jd(a.cacheIds),a.done);else if("data"in a)Ta(La(a.data),a.done);else if("url"in a)d.csv(a.url,function(b,c){Ta(La(c),a.done)});else if("rows"in a)Ta(La(yc(a.rows)),a.done);else if("columns"in a)Ta(La(zc(a.columns)),a.done);else throw Error("url or rows or columns is required.");};h.unload=function(a){h.data.targets=h.data.targets.filter(function(b){return b.id!== -a});p.selectAll(".target-"+a).transition().style("opacity",0).remove();Ca&&(p.selectAll(".legend-item-"+a).remove(),wb(h.data.targets));0 -b.classes.indexOf(a)})});return P};h.data.get=function(a){a=h.data.getAsTarget(a);return u(a)?a.values.map(function(a){return a.value}):void 0};h.data.getAsTarget=function(a){var b=nb(function(b){return b.id===a});return 0a?a:0}),c=1;c+a||(b[d][c]+=+a)});return e.max(Object.keys(b).map(function(a){return e.max(b[a])}))}function nb(a){var b=ob(function(b){return R(b.id)===a}),c="y2"===a?Hd:Id,d="y2"===a?Jd:Kd,c=c?c:Ed(b),d=d?d:Fd(b),f=0.1*Math.abs(d-c),e=f,g=f,h="y2"===a?Ld:Md;h&&(c=Math.max(Math.abs(c),Math.abs(d)),d=c-h,c=h-c);"y"===a&&La&&(e=La.top?La.top:f, +g=La.bottom?La.bottom:f);"y2"===a&&Ma&&(e=Ma.top?Ma.top:f,g=Ma.bottom?Ma.bottom:f);ia(b,"bar")&&!yc(b)&&(g=c);return[c-g,d+e]}function Nd(a){return e.min(a,function(a){return e.min(a.values,function(a){return a.x})})}function Od(a){return e.max(a,function(a){return e.max(a.values,function(a){return a.x})})}function pb(a){var b=[Nd(a),Od(a)];a=b[0];var b=b[1],c=ja?0:0.01*Math.abs(a-b);a=D?new Date(a.getTime()-c):a-c;b=D?new Date(b.getTime()+c):b+c;return[a,b]}function xa(a){return a[1]-a[0]}function Pd(a){for(var b= +0;ba?0:a}function Bc(a){return qa&&a===qa||ba&&Rd(ba,a)}function Sd(a){return!Bc(a)}function Td(a){Object.keys(a).forEach(function(b){ba[b]=a[b]})}function rb(a){var b;a&&(b=Na[a.id],a.name=b?b:a.id);return a}function Cc(a){var b= +a[0],c={},d=[],f,e;for(f=1;f +b&&(c=a,b=a.values.length)}):c=a?k.data.targets[0]:null;return c}function Pa(a){a=y(a)?k.data.targets:a;return a.map(function(a){return a.id})}function Gc(a){var b=Pa(),c;for(c=0;ca})}function Gd(a){return Hc(a,function(a){return 0f&&(e-=c+30)),c=b[1]+15+dw[c].indexOf(f.id)))for(d=0;d=e;e+=p)g+=d(a[f-1],a[f],e,m)}return g}function $b(a){var b;tb=e.select(wa);if(tb.empty())O.alert('No bind element found. Check the selector specified by "bindto" and existance of that element. Default "bindto" is "#chart".');else{tb.html("");k.data.x={};k.data.targets=Oa(a);ua(); +Y();m.domain(e.extent(pb(k.data.targets)));z.domain(nb("y"));aa.domain(nb("y2"));U.domain(m.domain());ib.domain(z.domain());jb.domain(aa.domain());J.ticks(10>a.length?a.length:10);ya.ticks(le).outerTickSize(0).tickFormat(me);kb.ticks(ne).outerTickSize(0).tickFormat(oe);T=m.domain();K.scale(U);sa&&F.scale(m);n=e.select(wa).append("svg").attr("width",r+C+$).attr("height",s+t+M).on("mouseenter",pe).on("mouseleave",qe);ub=n.append("defs");ub.append("clipPath").attr("id",ac).append("rect").attr("y",t).attr("width", +r).attr("height",s-t);ub.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x",-1-C).attr("y",-20).attr("width",W).attr("height",na);ub.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-C+1).attr("y",t-1).attr("width",zb).attr("height",ud);l=n.append("g").attr("transform",L.main);G=Ca?n.append("g").attr("transform",L.context):null;Da=Ea?n.append("g").attr("transform",L.legend):null;V=e.select(wa).style("position","relative").append("div").style("position","absolute").style("z-index", +"10").style("display","none");l.append("g").attr("class","x axis").attr("clip-path",h?"":"url(#xaxis-clip)").attr("transform",L.x).call(h?ya:J).append("text").attr("class","-axis-x-label").attr("x",r).attr("dy","-.5em").style("text-anchor","end").text(re);l.append("g").attr("class","y axis").attr("clip-path",h?"url(#yaxis-clip)":"").call(h?J:ya).append("text").attr("transform","rotate(-90)").attr("dy","1.2em").attr("dx","-.5em").style("text-anchor","end").text(se);Cb&&l.append("g").attr("class","y2 axis").attr("transform", +L.y2).call(kb);a=l.append("g").attr("clip-path",Va).attr("class","grid");hd&&a.append("g").attr("class","xgrids");bc&&(b=a.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(bc).enter().append("g").attr("class","xgrid-line"),b.append("line").attr("class",function(a){return""+a["class"]}),b.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform",h?"":"rotate(-90)").attr("dx",h?0:-t).attr("dy",-5).text(function(a){return a.text})); +te&&a.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",h?0:-10).attr("x2",h?r:-10).attr("y1",h?-10:t).attr("y2",h?-10:s);id&&a.append("g").attr("class","ygrids");cc&&(a=a.append("g").attr("class","ygrid-lines").selectAll("ygrid-line").data(cc).enter().append("g").attr("class","ygrid-line"),a.append("line").attr("class",function(a){return""+a["class"]}),a.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform", +h?"rotate(-90)":"").attr("dx",h?0:-t).attr("dy",-5).text(function(a){return a.text}));l.append("g").attr("clip-path",Va).attr("class","regions");l.append("g").attr("clip-path",Va).attr("class","chart");l.select(".chart").append("g").attr("class","event-rects").style("fill-opacity",0).style("cursor",sa?h?"ns-resize":"ew-resize":null);l.select(".chart").append("g").attr("class","chart-bars");l.select(".chart").append("g").attr("class","chart-lines");l.select(".chart").append("g").attr("class","chart-arcs").attr("transform", +L.arc).append("text").attr("class","chart-arcs-title").style("text-anchor","middle").text(ue);if(sa)l.insert("rect",ve?null:"g.grid").attr("class","zoom-rect").attr("width",r).attr("height",s).style("opacity",0).style("cursor",h?"ns-resize":"ew-resize").call(F).on("dblclick.zoom",null);null!==vb&&K.extent("function"!==typeof vb?vb:vb(pb()));Ca&&(G.append("g").attr("clip-path",Va).attr("class","chart"),G.select(".chart").append("g").attr("class","chart-bars"),G.select(".chart").append("g").attr("class", +"chart-lines"),G.append("g").attr("clip-path",Va).attr("class","x brush").call(K).selectAll("rect").attr(h?"width":"height",h?Db:fb),G.append("g").attr("class","x axis").attr("transform",L.subx).attr("clip-path",h?"url(#yaxis-clip)":"").call(hb));Ea&&wb(k.data.targets);jd(k.data.targets);x({withTransform:!0,withUpdateXDomain:!0});if(we){if(D&&"string"===typeof Fa){Fa=pa(Fa);for(a=0;aRb(c,a)?n.select(".event-rect").style("cursor", +"pointer"):n.select(".event-rect").style("cursor",null))}).on("click",function(){var a,c;E(k.data.targets)||(a=e.mouse(this),c=Rc(k.data.targets,a),100>Rb(c,a)&&l.select(".-circles-"+c.id).select(".-circle-"+c.index).each(function(){ld(this,c,c.index)}))}).call(e.behavior.drag().origin(Object).on("drag",function(){md(e.mouse(this))}).on("dragstart",function(){nd(e.mouse(this))}).on("dragend",function(){od()})).call(F).on("dblclick.zoom",null)}function ld(a,b,c){var d=e.select(a),f=d.classed(ma),g= +!1,h;"circle"===a.nodeName?(g=$c(a,1.5*Ua),h=cd):"rect"===a.nodeName&&(g=ad(a),h=ed);if(ta||g)ka&&la(b)&&(d.classed(ma,!f),h(!f,d,b,c)),Be(b,d)}function md(a){var b,c,d,f,g,h,m;E(k.data.targets)||!ka||sa&&!F.altDomain||(b=gc[0],c=gc[1],d=a[0],a=a[1],f=Math.min(b,d),g=Math.max(b,d),h=ta?t:Math.min(c,a),m=ta?s:Math.max(c,a),l.select(".dragarea").attr("x",f).attr("y",h).attr("width",g-f).attr("height",m-h),l.selectAll(".-shapes").selectAll(".-shape").filter(function(a){return la(a)}).each(function(a, +b){var c=e.select(this),d=c.classed(ma),k=c.classed(hc),l,n,p,q;l=!1;"circle"===this.nodeName?(l=1*c.attr("cx"),n=1*c.attr("cy"),q=cd,l=f",c,d,e;for(c=0;c"+e+""+d+"");return b+""}),we=g(["tooltip","init","show"],!1),Fa=g(["tooltip", +"init","x"],0),kd=g(["tooltip","init","position"],{top:"0px",left:"50px"}),ac=wa.replace("#","")+"-clip",Va="url(#"+ac+")",D="timeseries"===sd,ja="categorized"===sd,Qb=!D&&(qa||ba),gc=null,Wa=!1,fc=!1,oa=Ea?40:0,N=function(a,b){var c=[],d=null!==b?b:"#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf".split(" ");return function(b){if(b in a)return a[b];-1===c.indexOf(b)&&c.push(b);return d[c.indexOf(b)%d.length]}}(Je,Ke),Bd=function(){var a=[[e.time.format("%Y/%-m/%-d"), +function(){return!0}],[e.time.format("%-m/%-d"),function(a){return a.getMonth()}],[e.time.format("%-m/%-d"),function(a){return 1!==a.getDate()}],[e.time.format("%-m/%-d"),function(a){return a.getDay()&&1!==a.getDate()}],[e.time.format("%I %p"),function(a){return a.getHours()}],[e.time.format("%I:%M"),function(a){return a.getMinutes()}],[e.time.format(":%S"),function(a){return a.getSeconds()}],[e.time.format(".%L"),function(a){return a.getMilliseconds()}]];return function(b){for(var c=a.length-1,d= +a[c];!d[1](b);)d=a[--c];return d[0](b)}}(),r,Db,s,fb,Ab,va,Ja,Eb,Fb,lb,tc,uc,Mb,Gb,Hb,Ib,Jb,Kb,Lb,m,z,aa,U,ib,jb,J,ya,kb,hb,wd=h?"left":"bottom",xd=h?cb?"top":"bottom":cb?"right":"left",yd=h?eb?"bottom":"top":eb?"left":"right",zd=h?"left":"bottom",L={main:function(){return"translate("+C+","+t+")"},context:function(){return"translate("+Ha+","+Ga+")"},legend:function(){return"translate("+nc+","+mc+")"},y2:function(){return"translate("+(h?0:r)+","+(h?10:0)+")"},x:function(){return"translate(0,"+s+")"}, +subx:function(){return"translate(0,"+(h?0:fb)+")"},arc:function(){return"translate("+r/2+","+s/2+")"}},rc=40,qc=20;Mb=e.layout.pie().value(function(a){return a.values.reduce(function(a,c){return a+c.value},0)});var De=function(){var a=e.svg.line().x(h?function(a){return v(a.id)(a.value)}:za).y(h?za:function(a){return v(a.id)(a.value)});return function(b){var c=Wb(b.values),d;if(Tb(b))return Xc(b)?a.interpolate("cardinal"):a.interpolate("linear"),rd[b.id]?ke(c,m,v(b.id),rd[b.id]):a(c);d=m(c[0].x); +b=v(b.id)(c[0].value);return h?"M "+b+" "+d:"M "+d+" "+b}}(),Ee=function(){var a;a=h?e.svg.area().x0(function(a){return v(a.id)(0)}).x1(function(a){return v(a.id)(a.value)}).y(za):e.svg.area().x(za).y0(function(a){return v(a.id)(0)}).y1(function(a){return v(a.id)(a.value)});return function(b){var c=Wb(b.values),d;if(ia([b],"area")||ia([b],"area-spline"))return Xc(b)?a.interpolate("cardinal"):a.interpolate("linear"),a(c);d=m(c[0].x);b=v(b.id)(c[0].value);return h?"M "+b+" "+d:"M "+d+" "+b}}(),xb=function(a, +b){var c=a.__max__+1,d=1b.classes.indexOf(a)})});return P};k.data.get=function(a){a=k.data.getAsTarget(a);return q(a)?a.values.map(function(a){return a.value}):void 0};k.data.getAsTarget=function(a){var b=ob(function(b){return b.id=== +a});return 0