I am using d3 to build a simple chart that the user can edit interactively with the mouse.
It works on in all modern common browser (Chrome, Firefox, Safari), except for Internet Explorer 9 where I can start to drag an item but I never get the mouseup event.
The strangest bit is that, if I open the debugger, the page works percetly on Internet Explorer 9 as well.
My code looks like this:
item.append("svg:circle")
.attr("class", "handle")
.attr("opacity",0.5)
.attr("stroke","gray")
.attr("cx", bx(0.5)-bx(0))
.attr("r", 10)
.style("cursor", "crosshair")
.style("pointer-events", "all")
.call(d3.behavior.drag()
.on("dragstart", function() {
dragTarget = d3.select(this);
})
.on("drag", function() {
this.parentNode.appendChild(this); // put us on the front, not really needed
var dragTarget = d3.select(this);
dragTarget
.attr("cy", function() { return d3.event.dy + parseInt(dragTarget.attr("cy"))});
})
.on("dragend", function(d, i) {
newY = parseInt(d3.select(this).attr("cy"));
newValue = y.invert(newY);
var serieNo = this.__data__.serieNo;
console.log([serieNo+1,i+1]);
data[serieNo+1][i+1] = newValue;
updateBarChart();
onchange();
})
);
