diff --git a/c3.css b/c3.css index df6f8d7..1dd1dd9 100644 --- a/c3.css +++ b/c3.css @@ -15,6 +15,15 @@ text { user-select: none; } +.chart-arc path { + stroke: #fff; + +} +.chart-arc text { + fill: #fff; + font-size: 13px; +} + /*-- Grid --*/ .grid line { @@ -60,7 +69,7 @@ text { /*-- Focus --*/ -.target.focused path { +.target.focused path.-line { stroke-width: 2px; } diff --git a/c3.js b/c3.js index 4950384..e09ead1 100644 --- a/c3.js +++ b/c3.js @@ -184,6 +184,7 @@ /*-- Set Chart Params --*/ var bottom, bottom2, right, left, top2, top3, margin, margin2, margin3, width, height, height2, height3, currentWidth, currentHeight; + var radius, radiusExpanded, svgArc, svgArcExpanded, svgArcExpandedSub, pie; var xMin, xMax, yMin, yMax, x, y, y2, subX, subY, subY2, xAxis, yAxis, yAxis2, subXAxis; var xOrient = __axis_rotated ? "left" : "bottom", @@ -197,7 +198,8 @@ legend : function () { return "translate(" + margin3.left + "," + margin3.top + ")"; }, y2 : function () { return "translate(" + (__axis_rotated ? 0 : width) + "," + (__axis_rotated ? 10 : 0) + ")"; }, x : function () { return "translate(0," + height + ")"; }, - subx : function () { return "translate(0," + height2 + ")"; } + subx : function () { return "translate(0," + height2 + ")"; }, + arc: function () { return "translate(" + width / 2 + "," + height / 2 + ")"; } }; /*-- Define Functions --*/ @@ -220,6 +222,8 @@ height = currentHeight - margin.top - margin.bottom; height2 = currentHeight - margin2.top - margin2.bottom; height3 = currentHeight - margin3.top - margin3.bottom; + radiusExpanded = height / 2; + radius = radiusExpanded * 0.95; } function getCurrentWidth() { return __size_width === null ? getParentWidth() : __size_width; @@ -286,6 +290,10 @@ yAxis = getYAxis(y, yOrient); yAxis2 = getYAxis(y2, y2Orient); subXAxis = getXAxis(subX, subXOrient); + // update for arc + svgArc = getSvgArc(); + svgArcExpanded = getSvgArcExpanded(); + svgArcExpandedSub = getSvgArcExpanded(0.98); } function getX(min, max, domain, offset) { @@ -357,6 +365,80 @@ return tickFormat; } + //-- Arc --// + + pie = d3.layout.pie().value(function (d) { + return d.values.reduce(function (a, b) { return a + b.value; }, 0); + }); + + function updateAngle(d) { + var found = false; + pie(c3.data.targets).forEach(function (t) { + if (! found && t.data.id === d.data.id) { + found = true; + d = t; + return; + } + }); + return found ? d : null; + } + + function getSvgArc() { + var arc = d3.svg.arc().outerRadius(radius).innerRadius(0), + newArc = function (d, withoutUpdate) { + var updated; + if (withoutUpdate) { return arc(d); } // for interpolate + updated = updateAngle(d); + return updated ? arc(updated) : "M 0 0"; + }; + // TODO: extends all function + newArc.centroid = arc.centroid; + return newArc; + } + function getSvgArcExpanded(rate) { + var arc = d3.svg.arc().outerRadius(radiusExpanded * (rate ? rate : 1)).innerRadius(0); + return function (d) { + var updated = updateAngle(d); + return updated ? arc(updated) : "M 0 0"; + }; + } + function getArc(d, withoutUpdate) { + return isArcType(d.data) ? svgArc(d, withoutUpdate) : "M 0 0"; + } + function transformForArcLable(d) { + var updated = updateAngle(d), c, x, y, h, translate = ""; + if (updated) { + c = svgArc.centroid(updated); + x = c[0], y = c[1], h = Math.sqrt(x * x + y * y); + translate = "translate(" + ((x / h) * radius * 0.8) + ',' + ((y / h) * radius * 0.8) + ")"; + } + return translate; + } + function textForArcLable(d) { + var ratio = 100 * (d.endAngle - d.startAngle) / (Math.PI * 2); + return ratio.toFixed(1) + "%"; + } + function expandArc(targetId, withoutFadeOut) { + var target = d3.selectAll('.chart-arc.target' + (targetId ? '-' + targetId : '')), + noneTargets = d3.selectAll('.-arc').filter(function (data) { return data.data.id !== targetId; }); + target.selectAll('path') + .transition().duration(50) + .attr("d", svgArcExpanded) + .transition().duration(100) + .attr("d", svgArcExpandedSub); + if (!withoutFadeOut) { + noneTargets.style("opacity", 0.3); + } + } + function unexpandArc(targetId) { + var target = d3.selectAll('.chart-arc.target' + (targetId ? '-' + targetId : '')); + target.selectAll('path') + .transition().duration(50) + .attr("d", svgArc); + d3.selectAll('.-arc') + .style("opacity", 1); + } + //-- Domain --// function getYDomainMin(targets) { @@ -473,6 +555,9 @@ function getXKey(id) { return __data_x ? __data_x : __data_xs ? __data_xs[id] : null; } + function getXValue(id, i) { + return id in c3.data.x && c3.data.x[i] ? c3.data.x[i] : i; + } function addName(data) { var name = __data_names[data.id]; @@ -536,7 +621,7 @@ x = parseDate(d[xKey]); } else if (isCustomX) { - x = d[xKey] ? d[xKey] : c3.data.x[id][i]; + x = d[xKey] ? d[xKey] : getXValue(id, i); } else { x = i; @@ -616,6 +701,7 @@ function classLine(d) { return classShapes(d) + " -line -line-" + d.id; } function classCircles(d) { return classShapes(d) + " -circles -circles-" + d.id; } function classBars(d) { return classShapes(d) + " -bars -bars-" + d.id; } + function classArc(d) { return classShapes(d.data) + " -arc -arc-" + d.data.id; } function classShape(d, i) { return "-shape -shape-" + i; } function classCircle(d, i) { return classShape(d, i) + " -circle -circle-" + i; } function classBar(d, i) { return classShape(d, i) + " -bar -bar-" + i; } @@ -724,7 +810,7 @@ function showXGridFocus(data) { // Hide when scatter plot exists - if (hasScatterType(c3.data.targets)) { return; } + if (hasScatterType(c3.data.targets) || hasArcType(c3.data.targets)) { return; } main.selectAll('line.xgrid-focus') .style("visibility", "visible") .data([data]) @@ -830,6 +916,9 @@ function hasScatterType(targets) { return hasType(targets, 'scatter'); } + function hasArcType(targets) { + return hasType(targets, 'pie'); + } function isLineType(d) { var id = (typeof d === 'string') ? d : d.id; return !(id in __data_types) || __data_types[id] === 'line' || __data_types[id] === 'spline'; @@ -846,6 +935,10 @@ var id = (typeof d === 'string') ? d : d.id; return __data_types[id] === 'scatter'; } + function isArcType(d) { + var id = (typeof d === 'string') ? d : d.id; + return __data_types[id] === 'pie'; + } /* not used function lineData(d) { return isLineType(d) ? d.values : []; @@ -1132,11 +1225,6 @@ // TODO: set names if names not specified - // Set data type if data.type is specified - if (__data_type) { - setTargetType(getTargetIds().filter(function (id) { return ! (id in __data_types); }), __data_type); - } - // Init sizes and scales updateSizes(); updateScales(); @@ -1315,6 +1403,11 @@ main.select(".chart").append("g") .attr("class", "chart-lines"); + // Define g for arc chart area + main.select(".chart").append("g") + .attr("class", "chart-arcs") + .attr("transform", translate.arc); + if (__zoom_enabled) { // TODO: __zoom_privileged here? // if zoom privileged, insert rect to forefront main.insert('rect', __zoom_privileged ? null : 'g.grid') @@ -1405,6 +1498,7 @@ .style("cursor", __data_selection_enabled && __data_selection_grouped ? "pointer" : null) .on('mouseover', function (d, i) { if (dragging) { return; } // do nothing if dragging + if (hasArcType(c3.data.targets)) { return; } var selectedData = c3.data.targets.map(function (d) { return addName(d.values[i]); }); var j, newData; @@ -1432,6 +1526,7 @@ showXGridFocus(selectedData[0]); }) .on('mouseout', function (d, i) { + if (hasArcType(c3.data.targets)) { return; } hideXGridFocus(); hideTooltip(); // Undo expanded shapes @@ -1442,6 +1537,7 @@ var selectedData; if (dragging) { return; } // do nothing when dragging + if (hasArcType(c3.data.targets)) { return; } // Show tooltip selectedData = c3.data.targets.map(function (d) { @@ -1478,6 +1574,7 @@ }); }) .on('click', function (d, i) { + if (hasArcType(c3.data.targets)) { return; } if (cancelClick) { cancelClick = false; return; @@ -1501,6 +1598,7 @@ .attr('height', height) .attr('class', "event-rect") .on('mouseout', function () { + if (hasArcType(c3.data.targets)) { return; } hideXGridFocus(); hideTooltip(); unexpandCircles(); @@ -1509,6 +1607,7 @@ var mouse, closest, selectedData; if (dragging) { return; } // do nothing when dragging + if (hasArcType(c3.data.targets)) { return; } mouse = d3.mouse(this); closest = findClosestFromTargets(c3.data.targets, mouse); @@ -1534,8 +1633,12 @@ } }) .on('click', function () { - var mouse = d3.mouse(this), - closest = findClosestFromTargets(c3.data.targets, mouse); + var mouse, closest; + + if (hasArcType(c3.data.targets)) { return; } + + mouse = d3.mouse(this); + closest = findClosestFromTargets(c3.data.targets, mouse); // select if selection enabled if (dist(closest, mouse) < 100) { @@ -1575,16 +1678,21 @@ } function drag(mouse) { + var sx, sy, mx, my, minX, maxX, minY, maxY; + + if (hasArcType(c3.data.targets)) { return; } if (! __data_selection_enabled) { return; } // do nothing if not selectable if (__zoom_enabled && ! zoom.altDomain) { return; } // skip if zoomable because of conflict drag dehavior - var sx = dragStart[0], sy = dragStart[1], - mx = mouse[0], - my = mouse[1], - minX = Math.min(sx, mx), - maxX = Math.max(sx, mx), - minY = (__data_selection_grouped) ? margin.top : Math.min(sy, my), - maxY = (__data_selection_grouped) ? height : Math.max(sy, my); + sx = dragStart[0]; + sy = dragStart[1]; + mx = mouse[0]; + my = mouse[1]; + minX = Math.min(sx, mx); + maxX = Math.max(sx, mx); + minY = (__data_selection_grouped) ? margin.top : Math.min(sy, my); + maxY = (__data_selection_grouped) ? height : Math.max(sy, my); + main.select('.dragarea') .attr('x', minX) .attr('y', minY) @@ -1621,6 +1729,7 @@ } function dragstart(mouse) { + if (hasArcType(c3.data.targets)) { return; } if (! __data_selection_enabled) { return; } // do nothing if not selectable dragStart = mouse; main.select('.chart').append('rect') @@ -1631,6 +1740,7 @@ } function dragend() { + if (hasArcType(c3.data.targets)) { return; } if (! __data_selection_enabled) { return; } // do nothing if not selectable main.select('.dragarea') .transition().duration(100) @@ -1650,6 +1760,7 @@ var barX, barY, barW, barH; var rectX, rectW; var withY, withSubchart, withTransition, withUpdateXDomain; + var isPieChart; var duration; options = isDefined(options) ? options : {}; @@ -1657,6 +1768,7 @@ withSubchart = isDefined(options.withSubchart) ? options.withSubchart : true; withTransition = isDefined(options.withTransition) ? options.withTransition : true; withUpdateXDomain = isDefined(options.withUpdateXDomain) ? options.withUpdateXDomain : false; + isPieChart = hasArcType(c3.data.targets); duration = withTransition ? 250 : 0; @@ -1668,9 +1780,10 @@ y.domain(getYDomain('y')); y2.domain(getYDomain('y2')); - main.select(".x.axis").transition().duration(__axis_rotated ? duration : 0).call(__axis_rotated ? yAxis : xAxis); - main.select(".y.axis").transition().duration(__axis_rotated ? 0 : duration).call(__axis_rotated ? xAxis : yAxis); - main.select(".y2.axis").transition().call(yAxis2); + // axis + main.select(".x.axis").transition().duration(__axis_rotated ? duration : 0).call(__axis_rotated ? yAxis : xAxis).style("opacity", isPieChart ? 0 : 1); + main.select(".y.axis").transition().duration(__axis_rotated ? 0 : duration).call(__axis_rotated ? xAxis : yAxis).style("opacity", isPieChart ? 0 : 1); + main.select(".y2.axis").transition().call(yAxis2).style("opacity", isPieChart ? 0 : 1); // Update label position main.select(".x.axis .-axis-x-label").attr("x", width); @@ -1763,7 +1876,7 @@ .remove(); // lines and cricles - main.selectAll('.-line') + main.selectAll('.chart-line').select('.-line') .transition().duration(duration) .attr("d", lineOnMain); mainCircle = main.selectAll('.-circles').selectAll('.-circle') @@ -1780,6 +1893,35 @@ .attr("r", __point_r); mainCircle.exit().remove(); + // arc + main.selectAll('.chart-arc').select('.-arc') + .style("opacity", function (d) { return d === this._current ? 0 : 1; }) + .transition().duration(duration) + .attrTween("d", function (d) { + var updated = updateAngle(d); + if (! updated) { + return function () { return "M 0 0"; }; + } +/* + if (this._current === d) { + this._current = { + startAngle: Math.PI*2, + endAngle: Math.PI*2, + }; + } +*/ + var i = d3.interpolate(this._current, updated); + this._current = i(0); + return function (t) { return getArc(i(t), true); }; + }) + .style("opacity", 1); + main.selectAll('.chart-arc').select('text') + .attr("transform", transformForArcLable) + .attr("opacity", 0) + .transition().duration(duration) + .text(textForArcLable) + .attr("opacity", function (d) { return isArcType(d.data) ? 1 : 0; }); + // subchart if (__subchart_show) { // reflect main chart to extent on subchart if zoomed @@ -1910,6 +2052,7 @@ // Update main positions main.select('.x.axis').attr("transform", translate.x); main.select('.y2.axis').attr("transform", translate.y2); + main.select('.chart-arcs').attr("transform", translate.arc); // Update context sizes and positions if (__subchart_show) { context.select('.x.brush').selectAll('rect').attr('height', height2); @@ -1926,11 +2069,16 @@ } function updateTargets(targets) { - var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate; + var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate, mainPieEnter, mainPieUpdate; var contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate; /*-- Main --*/ + // Set data type if data.type is specified + if (__data_type) { + setTargetType(getTargetIds(targets).filter(function (id) { return ! (id in __data_types); }), __data_type); + } + //-- Bar --// mainBarUpdate = main.select('.chart-bars') .selectAll('.chart-bar') @@ -1972,6 +2120,36 @@ d.value = t.values[d.x].value; }); }); + // MEMO: can not keep same color... + //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); + mainPieEnter.append("path") + .attr("class", classArc) + .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; }) + .on('mouseover', function (d) { + expandArc(d.data.id); + focusLegend(d.data.id); + }) + .on('mouseout', function (d) { + unexpandArc(d.data.id); + revertLegend(); + }); + mainPieEnter.append("text") + .attr("dy", ".35em") + .style("text-anchor", "middle") + .style("pointer-events", "none"); + // MEMO: can not keep same color..., but not bad to update color in redraw + //mainPieUpdate.exit().remove(); /*-- Context --*/ @@ -2039,6 +2217,17 @@ /*-- Draw Legend --*/ + function focusLegend(id) { + d3.selectAll('.legend-item').filter(function (d) { return d !== id; }) + .transition().duration(100) + .style('opacity', 0.3); + } + function revertLegend() { + d3.selectAll('.legend-item') + .transition().duration(100) + .style('opacity', 1); + } + function updateLegend(targets, options) { var ids = getTargetIds(targets), l; var padding = width / 2 - __legend_item_width * Object.keys(targets).length / 2; @@ -2058,15 +2247,11 @@ __legend_item_onclick(d); }) .on('mouseover', function (d) { - d3.selectAll('.legend-item').filter(function (_d) { return _d !== d; }) - .transition().duration(100) - .style('opacity', 0.3); + focusLegend(d); c3.focus(d); }) .on('mouseout', function () { - d3.selectAll('.legend-item') - .transition().duration(100) - .style('opacity', 1); + revertLegend(); c3.revert(); }); l.append('rect') @@ -2078,6 +2263,7 @@ .attr('height', 24); l.append('rect') .attr("class", "legend-item-tile") + .style("pointer-events", "none") .style('fill', function (d) { return color(d); }) .attr('x', -200) .attr('y', function () { return legendHeight / 2 - 9; }) @@ -2085,6 +2271,7 @@ .attr('height', 10); l.append('text') .text(function (d) { return isDefined(__data_names[d]) ? __data_names[d] : d; }) + .style("pointer-events", "none") .attr('x', -200) .attr('y', function () { return legendHeight / 2; }); @@ -2109,30 +2296,54 @@ function getTargetSelector(target) { return isDefined(target) ? '.target-' + target : '.target'; } + function isNoneArc(d) { + return hasTarget(d.id); + } + function isArc(d) { + return 'data' in d && hasTarget(d.data.id); + } c3.focus = function (target) { + var candidates = d3.selectAll(getTargetSelector(target)), + candidatesForNoneArc = candidates.filter(isNoneArc), + candidatesForArc = candidates.filter(isArc); + function focus(targets) { + targets.transition().duration(100).style('opacity', 1); + } c3.defocus(); - d3.selectAll(getTargetSelector(target)) - .filter(function (d) { return hasTarget(d.id); }) - .classed('focused', true) - .transition().duration(100) - .style('opacity', 1); + focus(candidatesForNoneArc.classed('focused', true)); + focus(candidatesForArc); + if (hasArcType(c3.data.targets)) { + expandArc(target, true); + } }; c3.defocus = function (target) { - d3.selectAll(getTargetSelector(target)) - .filter(function (d) { return hasTarget(d.id); }) - .classed('focused', false) - .transition().duration(100) - .style('opacity', 0.3); + var candidates = d3.selectAll(getTargetSelector(target)), + candidatesForNoneArc = candidates.filter(isNoneArc), + candidatesForArc = candidates.filter(isArc); + function defocus(targets) { + targets.transition().duration(100).style('opacity', 0.3); + } + defocus(candidatesForNoneArc.classed('focused', false)); + defocus(candidatesForArc); + if (hasArcType(c3.data.targets)) { + unexpandArc(target); + } }; c3.revert = function (target) { - d3.selectAll(getTargetSelector(target)) - .filter(function (d) { return hasTarget(d.id); }) - .classed('focused', false) - .transition().duration(100) - .style('opacity', 1); + var candidates = d3.selectAll(getTargetSelector(target)), + candidatesForNoneArc = candidates.filter(isNoneArc), + candidatesForArc = candidates.filter(isArc); + function revert(targets) { + targets.transition().duration(100).style('opacity', 1); + } + revert(candidatesForNoneArc.classed('focused', false)); + revert(candidatesForArc); + if (hasArcType(c3.data.targets)) { + unexpandArc(target); + } }; c3.show = function (target) { diff --git a/c3.min.js b/c3.min.js index 4966bbc..0fe68b3 100644 --- a/c3.min.js +++ b/c3.min.js @@ -1,74 +1,80 @@ -(function(P){function Sc(){function n(c,e){c.attr("transform",function(c){return"translate("+(e(c)+aa)+", 0)"})}function t(c,e){c.attr("transform",function(c){return"translate(0,"+e(c)+")"})}function P(c){var e=c[0];c=c[c.length-1];return ea?0:a}function ec(a){return qa&&a===qa||X&&hd(X,a)}function id(a){return!ec(a)}function eb(a){var b=Ja[a.id];a.name=n(b)?b:a.id;return a}function fc(a){var b=a[0],d={},f=[],u,c;for(u=1;u -v[d].indexOf(c.id)))for(f=0;fb?a-b:0};return function(a){var c=b?S(a.id):E(a.id);return d(c(a.value))}}function Na(a,b){var d=t(a)?fb():a;"string"===typeof d&&(d=[d]);for(var f=0;f=e;e+=s)h+=f(a[c-1],a[c],e,l)}return h}function Db(a){var b,d;hb=c.select(wa);if(hb.empty())P.alert('No bind element found. Check the selector specified by "bindto" and existance of that element. Default "bindto" is "#chart".');else{hb.html("");h.data.x={};h.data.targets=Ka(a);Gc&&Na(fb().filter(function(a){return!(a in O)}),Gc);ua();Mb();m.domain(c.extent(Va()));w.domain(ka("y"));U.domain(ka("y2"));da.domain(m.domain()); -Za.domain(w.domain());$a.domain(U.domain());B.ticks(10>a.length?a.length:10);na.ticks(ud).outerTickSize(0).tickFormat(vd);ab.ticks(wd).outerTickSize(0).tickFormat(xd);V=m.domain();G.x(da);ra&&C.x(m);Pa=c.select(wa).append("svg").attr("width",q+A+ca).attr("height",p+s+F).on("mouseenter",yd).on("mouseleave",zd);ib=Pa.append("defs");ib.append("clipPath").attr("id",Eb).append("rect").attr("y",s).attr("width",q).attr("height",p-s);ib.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x",-1- -A).attr("y",-20).attr("width",R).attr("height",Q);ib.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-A+1).attr("y",s-1).attr("width",ja).attr("height",nb);k=Pa.append("g").attr("transform",J.main);x=ya?Pa.append("g").attr("transform",J.context):null;za=Aa?Pa.append("g").attr("transform",J.legend):null;N=c.select(wa).style("position","relative").append("div").style("position","absolute").style("z-index","10").style("display","none");k.append("g").attr("class","x axis").attr("clip-path", -g?"":"url(#xaxis-clip)").attr("transform",J.x).call(g?na:B).append("text").attr("class","-axis-x-label").attr("x",q).attr("dy","-.5em").style("text-anchor","end").text(Ad);k.append("g").attr("class","y axis").attr("clip-path",g?"url(#yaxis-clip)":"").call(g?B:na).append("text").attr("transform","rotate(-90)").attr("dy","1.2em").attr("dx","-.5em").style("text-anchor","end").text(Bd);Tb&&k.append("g").attr("class","y2 axis").attr("transform",J.y2).call(ab);b=k.append("g").attr("clip-path",Qa).attr("class", -"grid");Hc&&b.append("g").attr("class","xgrids");Fb&&(d=b.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(Fb).enter().append("g").attr("class","xgrid-line"),d.append("line").attr("class",function(a){return""+a["class"]}),d.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform",g?"":"rotate(-90)").attr("dx",g?0:-s).attr("dy",-6).text(function(a){return a.text}));Cd&&b.append("g").attr("class","xgrid-focus").append("line").attr("class", -"xgrid-focus").attr("x1",g?0:-10).attr("x2",g?q:-10).attr("y1",g?-10:s).attr("y2",g?-10:p);Ic&&b.append("g").attr("class","ygrids");Gb&&b.append("g").attr("class","ygrid-lines").selectAll("ygrid-line").data(Gb).enter().append("line").attr("class",function(a){return"ygrid-line "+a["class"]});k.append("g").attr("clip-path",Qa).attr("class","regions");k.append("g").attr("clip-path",Qa).attr("class","chart");b=k.select(".chart").append("g").attr("class","event-rects").style("fill-opacity",0).style("cursor", -ra?"ew-resize":null);X?Dd(b):Ed(b,a);k.select(".chart").append("g").attr("class","chart-bars");k.select(".chart").append("g").attr("class","chart-lines");if(ra)k.insert("rect",Fd?null:"g.grid").attr("class","zoom-rect").attr("width",q).attr("height",p).style("opacity",0).style("cursor","ew-resize").call(C).on("dblclick.zoom",null);null!==jb&&G.extent("function"!==typeof jb?jb:jb(ea,oa));ya&&(x.append("g").attr("clip-path",Qa).attr("class","chart"),x.select(".chart").append("g").attr("class","chart-bars"), -x.select(".chart").append("g").attr("class","chart-lines"),x.append("g").attr("clip-path",Qa).attr("class","x brush").call(G).selectAll("rect").attr("height",ma),x.append("g").attr("class","x axis").attr("transform",J.subx).call(Ea));Aa&&kb(h.data.targets);Jc(h.data.targets);z({withTransition:!1,withUpdateXDomain:!0});if(Gd){if(r&&"string"===typeof Ba){Ba=pa(Ba);for(a=0;awb(d,a)?c.select(".event-rect").style("cursor","pointer"):c.select(".event-rect").style("cursor", -null))}).on("click",function(){var a=c.mouse(this),d=oc(h.data.targets,a);100>wb(d,a)&&k.select(".-circles-"+d.id).select(".-circle-"+d.index).each(function(){Lc(this,d,d.index)})}).call(c.behavior.drag().origin(Object).on("drag",function(){Mc(c.mouse(this))}).on("dragstart",function(){Nc(c.mouse(this))}).on("dragend",function(){Oc()})).call(C).on("dblclick.zoom",null)}function Lc(a,b,d){var f=c.select(a),e=f.classed(ia),g=!1,h;"circle"===a.nodeName?(g=xc(a,1.5*Oa),h=Ac):"rect"===a.nodeName&&(g=yc(a), -h=Cc);if(sa||g)ha&&ta(b)&&(f.classed(ia,!e),h(!e,f,b,d)),Id(b,f)}function Mc(a){if(ha&&(!ra||C.altDomain)){var b=Kb[0],d=Kb[1],f=a[0];a=a[1];var e=Math.min(b,f),g=Math.max(b,f),h=sa?s:Math.min(d,a),m=sa?p:Math.max(d,a);k.select(".dragarea").attr("x",e).attr("y",h).attr("width",g-e).attr("height",m-h);k.selectAll(".-shapes").selectAll(".-shape").filter(function(a){return ta(a)}).each(function(a,b){var d=c.select(this),f=d.classed(ia),k=d.classed(Lb),l,n,p,q;l=!1;"circle"===this.nodeName?(l=1*d.attr("cx"), -n=1*d.attr("cy"),q=Ac,l=e", -d,c,e;for(d=0;d"+e+""+c+"";return b+""}),Gd=e(["tooltip","init","show"],!1),Ba=e(["tooltip","init","x"],0),Kc=e(["tooltip","init","position"],{top:"0px",left:"50px"}),Eb=wa.replace("#","")+"-clip",Qa="url(#"+Eb+")",r="timeseries"===Rc,W="categorized"=== -Rc,tb=!r&&(qa||X),Kb=null,Ra=!1,Jb=!1,la=Aa?40:0,Y=function(a,b){var d=[],c=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===d.indexOf(b)&&d.push(b);return c[d.indexOf(b)%c.length]}}(Od,Pd),$c=function(){var a=[[c.time.format("%Y/%-m/%-d"),function(){return!0}],[c.time.format("%-m/%-d"),function(a){return a.getMonth()}],[c.time.format("%-m/%-d"),function(a){return 1!==a.getDate()}],[c.time.format("%-m/%-d"), -function(a){return a.getDay()&&1!==a.getDate()}],[c.time.format("%I %p"),function(a){return a.getHours()}],[c.time.format("%I:%M"),function(a){return a.getMinutes()}],[c.time.format(":%S"),function(a){return a.getSeconds()}],[c.time.format(".%L"),function(a){return a.getMilliseconds()}]];return function(b){for(var c=a.length-1,e=a[c];!e[1](b);)e=a[--c];return e[0](b)}}(),Pb,Wb,Rb,Ya,Vb,Xb,q,p,ma,ob,va,Zb,$b,rb,sb,m,w,U,da,Za,$a,B,na,ab,Ea,Vc=g?"left":"bottom",Wc=g?qb?"top":"bottom":qb?"right":"left", -Xc=g?pb?"bottom":"top":pb?"left":"right",Yc="bottom",J={main:function(){return"translate("+A+","+s+")"},context:function(){return"translate("+l+","+Ca+")"},legend:function(){return"translate("+Ob+","+Nb+")"},y2:function(){return"translate("+(g?0:q)+","+(g?10:0)+")"},x:function(){return"translate(0,"+p+")"},subx:function(){return"translate(0,"+ma+")"}},Kd=function(){var a=c.svg.line().x(g?function(a){return E(a.id)(a.value)}:gb).y(g?gb:function(a){return E(a.id)(a.value)});return function(b){var c= -Dc(b.values),e;if(xb(b))return"spline"===O["string"===typeof b?b:b.id]?a.interpolate("cardinal"):a.interpolate("linear"),Qc[b.id]?td(c,m,E(b.id),Qc[b.id]):a(c);e=m(c[0].x);b=E(b.id)(c[0].value);return g?"M "+b+" "+e:"M "+e+" "+b}}(),Ld=function(){var a=c.svg.line().x(function(a){return da(a.x)}).y(function(a){return S(a.id)(a.value)});return function(b){var c=Dc(b.values);return xb(b)?a(c):"M "+da(c[0].x)+" "+S(b.id)(c[0].value)}}(),G=c.svg.brush().on("brush",function(){z({withTransition:!1,withY:!1, -withSubchart:!1,withUpdateXDomain:!0})}),C=c.behavior.zoom().on("zoomstart",function(){C.altDomain=c.event.sourceEvent.altKey?m.orgDomain():null}).on("zoom",ra?Md:null);G.update=function(){x&&x.select(".x.brush").call(this);return this};C.orgScaleExtent=function(){var a=Pc?Pc:[1,10];return[a[0],Math.max(La()/a[1],a[1])]};C.updateScaleExtent=function(){var a=m.orgDomain(),a=(a[1]-a[0])/(V[1]-V[0]),b=this.orgScaleExtent();this.scaleExtent([b[0]*a,b[1]*a]);return this};var Pa,ib,k,x,za,N,hb,ea=null, -oa=null,V;h.focus=function(a){h.defocus();c.selectAll(Ua(a)).filter(function(a){return ub(a.id)}).classed("focused",!0).transition().duration(100).style("opacity",1)};h.defocus=function(a){c.selectAll(Ua(a)).filter(function(a){return ub(a.id)}).classed("focused",!1).transition().duration(100).style("opacity",0.3)};h.revert=function(a){c.selectAll(Ua(a)).filter(function(a){return ub(a.id)}).classed("focused",!1).transition().duration(100).style("opacity",1)};h.show=function(a){c.selectAll(Ua(a)).transition().style("opacity", -1)};h.hide=function(a){c.selectAll(Ua(a)).transition().style("opacity",0)};h.unzoom=function(){G.clear().update();z({withUpdateXDomain:!0})};h.load=function(a){t(a.done)&&(a.done=function(){});"categories"in a&&W&&(Fa=a.categories,B.categories(Fa));if("cacheIds"in a&&Wa(a.cacheIds))Sa(mb(a.cacheIds),a.done);else if("data"in a)Sa(Ka(a.data),a.done);else if("url"in a)c.csv(a.url,function(b,c){Sa(Ka(c),a.done)});else if("rows"in a)Sa(Ka(fc(a.rows)),a.done);else if("columns"in a)Sa(Ka(gc(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});c.selectAll(".target-"+a).transition().style("opacity",0).remove();Aa&&(c.selectAll(".legend-item-"+a).remove(),kb(h.data.targets));0b.classes.indexOf(a)})});return K};h.data.get=function(a){a=h.data.getAsTarget(a);return n(a)?a.values.map(function(a){return a.value}):void 0};h.data.getAsTarget=function(a){var b=cb(function(b){return b.id===a});return 0a?0:a}function qc(a){return sa&&a===sa||aa&&Bd(aa,a)}function Cd(a){return!qc(a)}function lb(a){var b=Na[a.id];a.name=p(b)?b:a.id;return a}function rc(a){var b=a[0],c={},h=[],d,J;for(d=1;du[c].indexOf(d.id)))for(h=0;hb?a-b:0};return function(a){var d=b?W(a.id):H(a.id);return c(d(a.value))}}function Ra(a,b){var c=t(a)?mb():a;"string"===typeof c&&(c=[c]);for(var h=0;h=f;f+=u)k+=d(a[e-1],a[e],f,n)}return k}function Mb(a){var b,c;pb=d.select(ya);if(pb.empty())T.alert('No bind element found. Check the selector specified by "bindto" and existance of that element. Default "bindto" is "#chart".'); +else{pb.html("");f.data.x={};f.data.targets=Oa(a);wa();Xb();m.domain(d.extent(yd()));x.domain(ib("y"));Y.domain(ib("y2"));fa.domain(m.domain());db.domain(x.domain());eb.domain(Y.domain());D.ticks(10>a.length?a.length:10);pa.ticks(Pd).outerTickSize(0).tickFormat(Qd);fb.ticks(Rd).outerTickSize(0).tickFormat(Sd);Z=m.domain();K.x(fa);ta&&E.x(m);Ta=d.select(ya).append("svg").attr("width",n+C+ea).attr("height",r+q+I).on("mouseenter",Td).on("mouseleave",Ud);qb=Ta.append("defs");qb.append("clipPath").attr("id", +Nb).append("rect").attr("y",q).attr("width",n).attr("height",r-q);qb.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x",-1-C).attr("y",-20).attr("width",V).attr("height",U);qb.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-C+1).attr("y",q-1).attr("width",ma).attr("height",tb);k=Ta.append("g").attr("transform",F.main);y=za?Ta.append("g").attr("transform",F.context):null;Aa=Ba?Ta.append("g").attr("transform",F.legend):null;R=d.select(ya).style("position","relative").append("div").style("position", +"absolute").style("z-index","10").style("display","none");k.append("g").attr("class","x axis").attr("clip-path",g?"":"url(#xaxis-clip)").attr("transform",F.x).call(g?pa:D).append("text").attr("class","-axis-x-label").attr("x",n).attr("dy","-.5em").style("text-anchor","end").text(Vd);k.append("g").attr("class","y axis").attr("clip-path",g?"url(#yaxis-clip)":"").call(g?D:pa).append("text").attr("transform","rotate(-90)").attr("dy","1.2em").attr("dx","-.5em").style("text-anchor","end").text(Wd);dc&& +k.append("g").attr("class","y2 axis").attr("transform",F.y2).call(fb);b=k.append("g").attr("clip-path",Ua).attr("class","grid");Uc&&b.append("g").attr("class","xgrids");Ob&&(c=b.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(Ob).enter().append("g").attr("class","xgrid-line"),c.append("line").attr("class",function(a){return""+a["class"]}),c.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform",g?"":"rotate(-90)").attr("dx",g? +0:-q).attr("dy",-6).text(function(a){return a.text}));Xd&&b.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",g?0:-10).attr("x2",g?n:-10).attr("y1",g?-10:q).attr("y2",g?-10:r);Vc&&b.append("g").attr("class","ygrids");Pb&&b.append("g").attr("class","ygrid-lines").selectAll("ygrid-line").data(Pb).enter().append("line").attr("class",function(a){return"ygrid-line "+a["class"]});k.append("g").attr("clip-path",Ua).attr("class","regions");k.append("g").attr("clip-path", +Ua).attr("class","chart");b=k.select(".chart").append("g").attr("class","event-rects").style("fill-opacity",0).style("cursor",ta?"ew-resize":null);aa?Yd(b):Zd(b,a);k.select(".chart").append("g").attr("class","chart-bars");k.select(".chart").append("g").attr("class","chart-lines");k.select(".chart").append("g").attr("class","chart-arcs").attr("transform",F.arc);if(ta)k.insert("rect",$d?null:"g.grid").attr("class","zoom-rect").attr("width",n).attr("height",r).style("opacity",0).style("cursor","ew-resize").call(E).on("dblclick.zoom", +null);null!==rb&&K.extent("function"!==typeof rb?rb:rb(ga,qa));za&&(y.append("g").attr("clip-path",Ua).attr("class","chart"),y.select(".chart").append("g").attr("class","chart-bars"),y.select(".chart").append("g").attr("class","chart-lines"),y.append("g").attr("clip-path",Ua).attr("class","x brush").call(K).selectAll("rect").attr("height",oa),y.append("g").attr("class","x axis").attr("transform",F.subx).call(Ia));Ba&&sb(f.data.targets);Wc(f.data.targets);B({withTransition:!1,withUpdateXDomain:!0}); +if(ae){if(z&&"string"===typeof Ca){Ca=ra(Ca);for(a=0;aFb(c,a)?d.select(".event-rect").style("cursor","pointer"):d.select(".event-rect").style("cursor",null))}).on("click",function(){var a,c;A(f.data.targets)||(a=d.mouse(this),c=Bc(f.data.targets,a),100>Fb(c,a)&&k.select(".-circles-"+c.id).select(".-circle-"+c.index).each(function(){Yc(this, +c,c.index)}))}).call(d.behavior.drag().origin(Object).on("drag",function(){Zc(d.mouse(this))}).on("dragstart",function(){$c(d.mouse(this))}).on("dragend",function(){ad()})).call(E).on("dblclick.zoom",null)}function Yc(a,b,c){var e=d.select(a),f=e.classed(la),g=!1,k;"circle"===a.nodeName?(g=Lc(a,1.5*Sa),k=Oc):"rect"===a.nodeName&&(g=Mc(a),k=Qc);if(ua||g)ja&&ka(b)&&(e.classed(la,!f),k(!f,e,b,c)),ce(b,e)}function Zc(a){var b,c,e,g,m,v,l;A(f.data.targets)||!ja||ta&&!E.altDomain||(b=Tb[0],c=Tb[1],e=a[0], +a=a[1],g=Math.min(b,e),m=Math.max(b,e),v=ua?q:Math.min(c,a),l=ua?r:Math.max(c,a),k.select(".dragarea").attr("x",g).attr("y",v).attr("width",m-g).attr("height",l-v),k.selectAll(".-shapes").selectAll(".-shape").filter(function(a){return ka(a)}).each(function(a,b){var c=d.select(this),e=c.classed(la),h=c.classed(Ub),f,k,p,n;f=!1;"circle"===this.nodeName?(f=1*c.attr("cx"),k=1*c.attr("cy"),n=Oc,f=g",c,d,e;for(c=0;c"+e+""+d+"";return b+""}),ae=e(["tooltip","init","show"],!1),Ca=e(["tooltip","init","x"],0),Xc=e(["tooltip","init","position"],{top:"0px",left:"50px"}),Nb=ya.replace("#","")+"-clip",Ua="url(#"+Nb+")",z="timeseries"===gd,$="categorized"===gd,Eb=!z&&(sa||aa),Tb=null,Va=!1,Sb=!1,na=Ba?40:0,S=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]}}(ie,je),pd=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)}}(),$b,gc,bc,bb,fc,hc,n,r,oa,ub,xa,cb,xb,gb,lc,mc,Ab,jc,kc,yb,zb,m,x,Y,fa,db,eb,D,pa,fb,Ia,kd=g?"left":"bottom",ld=g?wb?"top":"bottom":wb?"right":"left",md=g?vb?"bottom":"top":vb?"left":"right",nd="bottom",F={main:function(){return"translate("+C+","+q+")"},context:function(){return"translate("+l+","+Da+")"},legend:function(){return"translate("+ +Zb+","+Yb+")"},y2:function(){return"translate("+(g?0:n)+","+(g?10:0)+")"},x:function(){return"translate(0,"+r+")"},subx:function(){return"translate(0,"+oa+")"},arc:function(){return"translate("+n/2+","+r/2+")"}};Ab=d.layout.pie().value(function(a){return a.values.reduce(function(a,c){return a+c.value},0)});var ee=function(){var a=d.svg.line().x(g?function(a){return H(a.id)(a.value)}:ob).y(g?ob:function(a){return H(a.id)(a.value)});return function(b){var c=Rc(b.values),d;if(Gb(b))return"spline"=== +N["string"===typeof b?b:b.id]?a.interpolate("cardinal"):a.interpolate("linear"),fd[b.id]?Od(c,m,H(b.id),fd[b.id]):a(c);d=m(c[0].x);b=H(b.id)(c[0].value);return g?"M "+b+" "+d:"M "+d+" "+b}}(),fe=function(){var a=d.svg.line().x(function(a){return fa(a.x)}).y(function(a){return W(a.id)(a.value)});return function(b){var c=Rc(b.values);return Gb(b)?a(c):"M "+fa(c[0].x)+" "+W(b.id)(c[0].value)}}(),K=d.svg.brush().on("brush",function(){B({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",ta?ge:null);K.update=function(){y&&y.select(".x.brush").call(this);return this};E.orgScaleExtent=function(){var a=ed?ed:[1,10];return[a[0],Math.max(Pa()/a[1],a[1])]};E.updateScaleExtent=function(){var a=m.orgDomain(),a=(a[1]-a[0])/(Z[1]-Z[0]),b=this.orgScaleExtent();this.scaleExtent([b[0]*a,b[1]*a]);return this};var Ta,qb,k,y,Aa,R,pb,ga=null,qa=null,Z;f.focus=function(a){var b=d.selectAll(Ya(a)), +c=b.filter(Vb),b=b.filter(Wb);f.defocus();c.classed("focused",!0).transition().duration(100).style("opacity",1);b.transition().duration(100).style("opacity",1);A(f.data.targets)&&Ga(a,!0)};f.defocus=function(a){var b=d.selectAll(Ya(a)),c=b.filter(Vb),b=b.filter(Wb);c.classed("focused",!1).transition().duration(100).style("opacity",0.3);b.transition().duration(100).style("opacity",0.3);A(f.data.targets)&&Ha(a)};f.revert=function(a){var b=d.selectAll(Ya(a)),c=b.filter(Vb),b=b.filter(Wb);c.classed("focused", +!1).transition().duration(100).style("opacity",1);b.transition().duration(100).style("opacity",1);A(f.data.targets)&&Ha(a)};f.show=function(a){d.selectAll(Ya(a)).transition().style("opacity",1)};f.hide=function(a){d.selectAll(Ya(a)).transition().style("opacity",0)};f.unzoom=function(){K.clear().update();B({withUpdateXDomain:!0})};f.load=function(a){t(a.done)&&(a.done=function(){});"categories"in a&&$&&(Ja=a.categories,D.categories(Ja));if("cacheIds"in a&&zd(a.cacheIds))Wa(Ad(a.cacheIds),a.done);else if("data"in +a)Wa(Oa(a.data),a.done);else if("url"in a)d.csv(a.url,function(b,c){Wa(Oa(c),a.done)});else if("rows"in a)Wa(Oa(rc(a.rows)),a.done);else if("columns"in a)Wa(Oa(sc(a.columns)),a.done);else throw Error("url or rows or columns is required.");};f.unload=function(a){f.data.targets=f.data.targets.filter(function(b){return b.id!==a});d.selectAll(".target-"+a).transition().style("opacity",0).remove();Ba&&(d.selectAll(".legend-item-"+a).remove(),sb(f.data.targets));0b.classes.indexOf(a)})});return O};f.data.get=function(a){a=f.data.getAsTarget(a);return p(a)?a.values.map(function(a){return a.value}):void 0};f.data.getAsTarget=function(a){var b= +jb(function(b){return b.id===a});return 0