javascript - why does 'on mouse...' function strangely -

javascript - why does 'on mouse...' function strangely -

i have programme allows user explore 3d function via 2 2d slices (in 2 windows). function encoded in 2 tables, 1 each dimension. select piece shown in 1 window, user enables 'editdim' checkbox, click-drags in other window. when 'editdim' unchecked, user can pan , zoom each window. problem when in 'editdim' mode, if click , drag mouse cursor moves out of pink-shaded drawing region, pan-zoom kicks in. i've set simplified version jsfiddle, http://jsfiddle.net/eric_l/pb6ak/. i've added log messages show mouse events, , when not click-dragging (normal mouse movements), see no events regions surrounding drawing regions.

this.zoom = d3.behavior.zoom().x(self.xscale).y(self.yscale).on("zoom", function() {self.redraw() } ); this.div = d3.select(this.anchor).append("div"); this.svg = this.div.append("svg") .datum(this.data[this.select].values) .attr("width", this.width + this.margin.left + this.margin.right) .attr("height", this.height + this.margin.top + this.margin.bottom) .append("g") .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")") .call(this.zoom) .on("mouseover", function () { console.log("on mouseover"); self.div.style("background", "lightyellow"); }) .on("mouseout", function () { console.log("on mouseout"); self.div.style("background", null); }) .on("mousemove", function () { console.log("on mousemove"); if (editdim) { d3.event.stoppropagation(); self.update(); } }) .on("mousedown", function () { console.log("on mousedown"); self.mousedown = true; if (editdim) { d3.event.stoppropagation(); self.update(); } }) .on("mouseup", function () { console.log("on mouseup"); self.mousedown = false; });

i'm using d3.behavior.zoom method - maybe associated dom element larger dom element 'on mouse...' events associated with? if so, how both sets of events cover same extent of screen , execute mutual-exclusively (again, selected 'editdim' checkbox). when alter dom element 'on mouse...' events associated 'div' element above 'svg', no longer mousedown events.

thank you.

you attached events g element, not svg,

i changed code following, attach svg:

this.div = d3.select(this.anchor).append("div"); var svg = this.div.append("svg") .datum(this.data[this.select].values) .attr("width", this.width + this.margin.left + this.margin.right) .attr("height", this.height + this.margin.top + this.margin.bottom); this.svg=svg .append("g") .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")") .call(this.zoom); svg.on("mouseover", function () {//........

demo

javascript d3.js