I am adding the relevant code to this post to see if it generates any interest.
First up is the svg initialization:
var svg = d3.select("body").append("svg")
.attr("width",viewportWidth)
.attr("height",viewportHeight)
.call(zoom)
.append("g")
.attr("class", "main")
.attr("transform","translate("+(left_shift)+","+(top_shift)+")");
Next is the mouse click registration. We use the click to find the nearest data point and put the tooltip there. I have some timing code in there
d3.select('svg').on("click", function() {
var startTime = new Date();
var coords = [0, 0];
coords = d3.mouse(this);
var isClicked = isPointClicked(point_clicked);
if(!isClicked) clicked(coords[0], coords[1]);
point_clicked = false;
var finalEndTime = new Date();
var finalTimeDiff = finalEndTime - startTime;
console.log('all click actions completed in '+finalTimeDiff+' milliseconds.');
});
We use the mouse right-click to turn off tooltip actions. Skipping that code, showing the plotting code.
I think this part is relevant only in that it shows that I am not attaching any mouse events to the data itself.
var side = 2; // takes place of radius
// shiftrect needs to be half the square size to center square on data point
var shiftrect = 1;
for(var k=0;k<plot_data.series.length;++k) {
if(plot_data.series[k].visible === true) {
var y_list = plot_data.series[k].ydata;
var x_list = plot_data.series[k].xdata;
svg.selectAll("dot")
.data(x_list)
.enter().append("rect")
.attr("id", function(d, i) { return "rect"+k+i;})
.attr("x", function(d) {return x(parseFloat(d))-shiftrect;})
.attr("y", function(d,i) {return y(parseFloat(y_list[i]))-shiftrect;})
.attr("height", side)
.attr("width", side)
.attr("fill",function() { return color(k);})
.attr("clip-path", "url(#plot-clip)");
}
}
So that's basically it. When I click the mouse in a scatter plot with only a few data points, the tooltip code is called almost immediately.
If I have a few thousand entries, there is a significant delay before my code is even reached. This delay exists in D3 3.2.0 and later.
D3 3.1.10 does not exhibit this behavior, and as you can see my data has no direct relation to the mouse click itself.
That's why I think this is a bug introduced in the 3.2.0 code.
Can anyone think of a different approach to get around this significant slowdown? Right now, the slowdown is stopping me from delivering this functionality.
Is there something I can do that gets the mouse click in pixel space relative to the svg element without actually tying it to the svg? Can I place an empty svg in the same position on the page that serves as a ghost or placeholder? All I need is a way to quickly capture this mouse click without having the data get in the way, since the data is not directly responsible for this mouse click.