From 925e106eef16ca281e777b01ba3cebde7f7eeb50 Mon Sep 17 00:00:00 2001 From: Masayuki Tanaka Date: Mon, 21 Oct 2013 17:20:33 +0900 Subject: [PATCH] Fix zoom/drag/click conflict --- c3.js | 16 ++++++-- c3.min.js | 118 +++++++++++++++++++++++++++--------------------------- 2 files changed, 72 insertions(+), 62 deletions(-) diff --git a/c3.js b/c3.js index 12d93bb..f077415 100644 --- a/c3.js +++ b/c3.js @@ -33,6 +33,8 @@ var __size_width = getConfig(['size','width'], null), __size_height = getConfig(['size','height'], 280); + var __zoom_enabled = getConfig(['zoom','enabled'], false); + // data - data configuration checkConfig('data', 'data is required in config'); @@ -137,7 +139,7 @@ var isTimeSeries = (__axis_x_type === 'timeseries'), isCategorized = (__axis_x_type === 'categorized'); - var dragStart = null, dragging = false; + var dragStart = null, dragging = false, cancelClick = false; var legendHeight = __legend_show ? 40 : 0; @@ -908,7 +910,7 @@ .attr('width', width) .attr('height', height) .style('opacity', 0) - .call(zoom); + .call(zoom).on("dblclick.zoom", null); // Grids grid = main.append('g') @@ -1066,6 +1068,10 @@ }); }) .on('click', function(d,i) { + if (cancelClick) { + cancelClick = false; + return; + } main.selectAll('.-shape-'+i).each(function(d){ var _this = d3.select(this), isSelected = _this.classed(SELECTED); @@ -1090,6 +1096,7 @@ .call( d3.behavior.drag().origin(Object).on('drag', function(d){ if ( ! __data_selection_enabled) return; // do nothing if not selectable + if (__zoom_enabled) return; // skip if zoomable because of conflict drag dehavior var sx = dragStart[0], sy = dragStart[1], mouse = d3.mouse(this), @@ -1153,7 +1160,7 @@ // TODO: add callback here }) ) - .call(zoom); + .call(zoom).on("dblclick.zoom", null); // Define g for bar chart area main.select(".chart").append("g") @@ -1438,6 +1445,9 @@ withSubchart: false, withUpdateXDomain: false }); + if (d3.event.sourceEvent.type === 'mousemove') { + cancelClick = true; + } } function resize () { diff --git a/c3.min.js b/c3.min.js index ad772b5..7bfea03 100644 --- a/c3.min.js +++ b/c3.min.js @@ -1,62 +1,62 @@ -(function(pb){function qb(){function k(c,Wa){c.attr("transform",function(c){return"translate("+(Wa(c)+T)+",0)"})}function u(c,k){c.attr("transform",function(c){return"translate(0,"+k(c)+")"})}function Ga(c){var k=c[0];c=c[c.length-1];return kr[d].indexOf(c.id)))for(g=0;g=t;t+=diffx2)q+=c(a[f-1],a[f],t,m);return q}function Sb(){return"translate("+(e?0:s)+","+(e?10:0)+")"}function gb(a){var b=l.data.targets=N(a),d,c;m.domain(d3.extent(a.map(function(a){return a.x})));x.domain(E(b,"y"));Q.domain(E(b,"y2"));C.domain(m.domain());Ja.domain(x.domain());Ka.domain(Q.domain());D.ticks(10>a.length? -a.length:10);ka.ticks(wc).outerTickSize(0).tickFormat(xc);La.ticks(yc).outerTickSize(0).tickFormat(zc);Cb=m.domain();R.x(C);Aa.x(m);h.append("g").attr("class","x axis").attr("clip-path",e?"":"url(#xaxis-clip)").attr("transform","translate(0,"+v+")").call(e?ka:D);h.append("g").attr("class","y axis").attr("clip-path",e?"url(#yaxis-clip)":"").call(e?D:ka).append("text").attr("transform","rotate(-90)").attr("dy","1.4em").attr("dx","-.8em").style("text-anchor","end").text(Ac);vb&&h.append("g").attr("class", -"y2 axis").attr("transform",Sb).call(La);h.append("rect").attr("class","zoom-rect").attr("width",s).attr("height",v).style("opacity",0).call(Aa);d=h.append("g").attr("clip-path",Ra).attr("class","grid");Tb&&d.append("g").attr("class","xgrids");hb&&(c=d.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(hb).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",e?"":"rotate(-90)").attr("dx",e?0:-p).attr("dy",-6).text(function(a){return a.text}));Bc&&d.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",e?0:-10).attr("x2",e?s:-10).attr("y1",e?-10:p).attr("y2",e?-10:v);Ub&&d.append("g").attr("class","ygrids");ib&&d.append("g").attr("class","ygrid-lines").selectAll("ygrid-line").data(ib).enter().append("line").attr("class",function(a){return"ygrid-line "+a["class"]});h.append("g").attr("clip-path", -Ra).attr("class","regions");h.append("g").attr("clip-path",Ra).attr("class","chart");h.select(".chart").append("g").attr("class","event-rects").style("fill-opacity",0).selectAll(".event-rects").data(a).enter().append("rect").attr("class",function(a,b){return"event-rect event-rect-"+b}).style("cursor",function(a){return Y&&da?"pointer":null}).on("mouseover",function(a,b){if(!Sa){var d=l.data.targets.map(function(a){return Ha(a.values[b])}),c,g;if(0",d,c,f;for(d=0;d"+f+""+c+"";return b+""}),Dc=c(["tooltip","init","show"],!1),oa=c(["tooltip","init","x"],0),Zb=c(["tooltip","init","position"],{top:"0px",left:"50px"}),nb=y.bindto.replace("#","")+"-clip",Ra="url(#"+nb+")",H="timeseries"===bc,ga="categorized"===bc,kb=null,Sa=!1,ba=na?40:0,Lc=function(a){return function(b){for(var d=a.length-1,c=a[d];!c[1](b);)c= -a[--d];return c[0](b)}}([[d3.time.format("%Y/%-m/%-d"),function(){return!0}],[d3.time.format("%-m/%-d"),function(a){return a.getMonth()}],[d3.time.format("%-m/%-d"),function(a){return 1!=a.getDate()}],[d3.time.format("%-m/%-d"),function(a){return a.getDay()&&1!=a.getDate()}],[d3.time.format("%I %p"),function(a){return a.getHours()}],[d3.time.format("%I:%M"),function(a){return a.getMinutes()}],[d3.time.format(":%S"),function(a){return a.getSeconds()}],[d3.time.format(".%L"),function(a){return a.getMilliseconds()}]]), -ca=d3.time.format(Ic).parse,sb,xb,ub,wb,yb,s,v,ja,Ab,Bb,$a,ab,m,x,Q,C,Ja,Ka,D=ga?qb():d3.svg.axis(),ka=d3.svg.axis(),La=d3.svg.axis(),la=ga?qb():d3.svg.axis();P();T();H&&D.tickFormat(Lc);ga?(D.categories(Ua).tickCentered(cc),la.categories(Ua).tickCentered(cc)):(D.tickOffset=function(){return 0},la.tickOffset=function(){return 0});ga&&function(){var a=m,b=C,c=Object.keys(m),g,f;m=function(b){return a(b)+D.tickOffset()};C=function(a){return b(a)+la.tickOffset()};for(f=0;fa?0:a},S=function(a,b){var c=[],g=null!==b?b:"#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf".split(" ");return function(b){if(b in -a)return a[b];0<=c.indexOf(b)||c.push(b);return g[c.indexOf(b)%g.length]}}(Jc,Kc),Va=d3.select(y.bindto).append("svg").attr("width",s+G+B).attr("height",v+p+U),ob=Va.append("defs");ob.append("clipPath").attr("id",nb).append("rect").attr("y",p).attr("width",s).attr("height",v-p);ob.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x",-1).attr("y",-1).attr("width",s+2).attr("height",40);ob.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-G+1).attr("y",p-1).attr("width", -G).attr("height",v-p+2);var h=Va.append("g").attr("transform","translate("+G+","+p+")"),K=null;ma&&(K=Va.append("g").attr("transform","translate("+J+","+pa+")"));var Ea=null;na&&(Ea=Va.append("g").attr("transform","translate("+Ga+","+rb+")"));var ea=d3.select(y.bindto).style("position","relative").append("div").style("position","absolute").style("width","30%").style("z-index","10").style("visibility","hidden"),R=d3.svg.brush().on("brush",function(){I({withTransition:!1,withY:!1,withSubchart:!1})}), -Aa=d3.behavior.zoom().on("zoom",function(){I({withTransition:!1,withY:!1,withSubchart:!1,withUpdateXDomain:!1})}),Pa=null,bb=null,Cb;l.focus=function(a){l.defocus();d3.selectAll(Fa(a)).filter(function(a){return Xa(a.id)}).classed("focused",!0).transition().duration(100).style("opacity",1)};l.defocus=function(a){d3.selectAll(Fa(a)).filter(function(a){return Xa(a.id)}).classed("focused",!1).transition().duration(100).style("opacity",0.3)};l.revert=function(a){d3.selectAll(Fa(a)).filter(function(a){return Xa(a.id)}).classed("focused", -!1).transition().duration(100).style("opacity",1)};l.show=function(a){d3.selectAll(Fa(a)).transition().style("opacity",1)};l.hide=function(a){d3.selectAll(Fa(a)).transition().style("opacity",0)};l.load=function(a){u(a.done)&&(a.done=function(){});if("cacheIds"in a&&ha(a.cacheIds))Ca(ia(a.cacheIds),a.done);else if("data"in a)Ca(N(data),a.done);else if("url"in a)d3.csv(a.url,function(b,c){Ca(N(c),a.done)});else if("rows"in a)Ca(N(qa(a.rows)),a.done);else if("columns"in a)Ca(N(ra(a.columns)),a.done); -else throw Error("url or rows or columns is required.");};l.unload=function(a){l.data.targets=l.data.targets.filter(function(b){return b.id!=a});d3.selectAll(".target-"+a).transition().style("opacity",0).remove();na&&(d3.selectAll(".legend-item-"+a).remove(),Ta(l.data.targets));0b.classes.indexOf(a)})});return L};l.data.get=function(a){a=l.data.getAsTarget(a);return k(a)?a.values.map(function(a){return a.value}):void 0};l.data.getAsTarget=function(a){var b=Ma(function(b){return b.id==a});return 0r[d].indexOf(c.id)))for(e=0;e=t;t+=diffx2)q+=c(a[f-1],a[f],t,m);return q}function Tb(){return"translate("+(g?0:s)+","+(g?10:0)+")"}function gb(a){var b=l.data.targets=N(a),d,c;m.domain(d3.extent(a.map(function(a){return a.x})));x.domain(E(b,"y"));Q.domain(E(b,"y2"));C.domain(m.domain());Ja.domain(x.domain());Ka.domain(Q.domain());D.ticks(10>a.length? +a.length:10);ka.ticks(xc).outerTickSize(0).tickFormat(yc);La.ticks(zc).outerTickSize(0).tickFormat(Ac);Db=m.domain();R.x(C);Aa.x(m);h.append("g").attr("class","x axis").attr("clip-path",g?"":"url(#xaxis-clip)").attr("transform","translate(0,"+v+")").call(g?ka:D);h.append("g").attr("class","y axis").attr("clip-path",g?"url(#yaxis-clip)":"").call(g?D:ka).append("text").attr("transform","rotate(-90)").attr("dy","1.4em").attr("dx","-.8em").style("text-anchor","end").text(Bc);wb&&h.append("g").attr("class", +"y2 axis").attr("transform",Tb).call(La);h.append("rect").attr("class","zoom-rect").attr("width",s).attr("height",v).style("opacity",0).call(Aa).on("dblclick.zoom",null);d=h.append("g").attr("clip-path",Ra).attr("class","grid");Ub&&d.append("g").attr("class","xgrids");hb&&(c=d.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(hb).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:-p).attr("dy",-6).text(function(a){return a.text}));Cc&&d.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",g?0:-10).attr("x2",g?s:-10).attr("y1",g?-10:p).attr("y2",g?-10:v);Vb&&d.append("g").attr("class","ygrids");ib&&d.append("g").attr("class","ygrid-lines").selectAll("ygrid-line").data(ib).enter().append("line").attr("class",function(a){return"ygrid-line "+a["class"]}); +h.append("g").attr("clip-path",Ra).attr("class","regions");h.append("g").attr("clip-path",Ra).attr("class","chart");h.select(".chart").append("g").attr("class","event-rects").style("fill-opacity",0).selectAll(".event-rects").data(a).enter().append("rect").attr("class",function(a,b){return"event-rect event-rect-"+b}).style("cursor",function(a){return Y&&da?"pointer":null}).on("mouseover",function(a,b){if(!Sa){var d=l.data.targets.map(function(a){return Ha(a.values[b])}),c,e;if(0",d,c,f;for(d=0;d"+f+""+c+"";return b+""}),Fc=c(["tooltip","init","show"],!1),oa=c(["tooltip","init","x"],0),$b=c(["tooltip","init","position"],{top:"0px",left:"50px"}),ob=y.bindto.replace("#","")+"-clip",Ra="url(#"+ +ob+")",H="timeseries"===cc,ga="categorized"===cc,lb=null,Sa=!1,kb=!1,ba=na?40:0,Nc=function(a){return function(b){for(var c=a.length-1,e=a[c];!e[1](b);)e=a[--c];return e[0](b)}}([[d3.time.format("%Y/%-m/%-d"),function(){return!0}],[d3.time.format("%-m/%-d"),function(a){return a.getMonth()}],[d3.time.format("%-m/%-d"),function(a){return 1!=a.getDate()}],[d3.time.format("%-m/%-d"),function(a){return a.getDay()&&1!=a.getDate()}],[d3.time.format("%I %p"),function(a){return a.getHours()}],[d3.time.format("%I:%M"), +function(a){return a.getMinutes()}],[d3.time.format(":%S"),function(a){return a.getSeconds()}],[d3.time.format(".%L"),function(a){return a.getMilliseconds()}]]),ca=d3.time.format(Kc).parse,tb,yb,vb,xb,zb,s,v,ja,Bb,Cb,$a,ab,m,x,Q,C,Ja,Ka,D=ga?rb():d3.svg.axis(),ka=d3.svg.axis(),La=d3.svg.axis(),la=ga?rb():d3.svg.axis();P();T();H&&D.tickFormat(Nc);ga?(D.categories(Ua).tickCentered(dc),la.categories(Ua).tickCentered(dc)):(D.tickOffset=function(){return 0},la.tickOffset=function(){return 0});ga&&function(){var a= +m,b=C,c=Object.keys(m),e,f;m=function(b){return a(b)+D.tickOffset()};C=function(a){return b(a)+la.tickOffset()};for(f=0;fa?0: +a},S=function(a,b){var c=[],e=null!==b?b:"#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf".split(" ");return function(b){if(b in a)return a[b];0<=c.indexOf(b)||c.push(b);return e[c.indexOf(b)%e.length]}}(Lc,Mc),Va=d3.select(y.bindto).append("svg").attr("width",s+G+B).attr("height",v+p+U),pb=Va.append("defs");pb.append("clipPath").attr("id",ob).append("rect").attr("y",p).attr("width",s).attr("height",v-p);pb.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x", +-1).attr("y",-1).attr("width",s+2).attr("height",40);pb.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-G+1).attr("y",p-1).attr("width",G).attr("height",v-p+2);var h=Va.append("g").attr("transform","translate("+G+","+p+")"),K=null;ma&&(K=Va.append("g").attr("transform","translate("+J+","+pa+")"));var Ea=null;na&&(Ea=Va.append("g").attr("transform","translate("+Ga+","+sb+")"));var ea=d3.select(y.bindto).style("position","relative").append("div").style("position","absolute").style("width", +"30%").style("z-index","10").style("visibility","hidden"),R=d3.svg.brush().on("brush",function(){I({withTransition:!1,withY:!1,withSubchart:!1})}),Aa=d3.behavior.zoom().on("zoom",function(){I({withTransition:!1,withY:!1,withSubchart:!1,withUpdateXDomain:!1});"mousemove"===d3.event.sourceEvent.type&&(kb=!0)}),Pa=null,bb=null,Db;l.focus=function(a){l.defocus();d3.selectAll(Fa(a)).filter(function(a){return Xa(a.id)}).classed("focused",!0).transition().duration(100).style("opacity",1)};l.defocus=function(a){d3.selectAll(Fa(a)).filter(function(a){return Xa(a.id)}).classed("focused", +!1).transition().duration(100).style("opacity",0.3)};l.revert=function(a){d3.selectAll(Fa(a)).filter(function(a){return Xa(a.id)}).classed("focused",!1).transition().duration(100).style("opacity",1)};l.show=function(a){d3.selectAll(Fa(a)).transition().style("opacity",1)};l.hide=function(a){d3.selectAll(Fa(a)).transition().style("opacity",0)};l.load=function(a){u(a.done)&&(a.done=function(){});if("cacheIds"in a&&ha(a.cacheIds))Ca(ia(a.cacheIds),a.done);else if("data"in a)Ca(N(data),a.done);else if("url"in +a)d3.csv(a.url,function(b,c){Ca(N(c),a.done)});else if("rows"in a)Ca(N(qa(a.rows)),a.done);else if("columns"in a)Ca(N(ra(a.columns)),a.done);else throw Error("url or rows or columns is required.");};l.unload=function(a){l.data.targets=l.data.targets.filter(function(b){return b.id!=a});d3.selectAll(".target-"+a).transition().style("opacity",0).remove();na&&(d3.selectAll(".legend-item-"+a).remove(),Ta(l.data.targets));0b.classes.indexOf(a)})});return L};l.data.get=function(a){a=l.data.getAsTarget(a);return k(a)?a.values.map(function(a){return a.value}):void 0};l.data.getAsTarget=function(a){var b=Ma(function(b){return b.id==a});return 0