Zoom not working on rect with style fill:none

ndru7t7 commented 6 years ago

Check out the following code, copy/paste it into a file and open in your browser. Change the fill style of class .zoom to any color and the zoom function will be called, set it to none and the zoom function is not invoked. Bug?


<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">

body {
    margin:0;
}

div {
    width: 80vw; 
    height: 50vh;
    overflow: auto; 
    outline-style: dotted; 
    outline-width: thin;
}

svg {
    outline-style: dotted; 
    outline-width: thin;
}

/*
change this to eg white and observe how you can now see the zoom event in the console..
*/
.zoom {
    fill: none;
}

</style>
<!-- Body tag is where we will append our SVG and SVG objects-->
<body>
<div id="tradeviz">
<svg>
</svg>
</div>
</body>

<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://js.pusher.com/4.2/pusher.min.js"></script>
<script>

var div_h = document.getElementById("tradeviz").offsetHeight;
var div_w = document.getElementById("tradeviz").offsetWidth;

var viewBox = "0 0 " + div_w + " " + div_h;

var start = new Date();
var x = d3.scaleTime()
    .rangeRound([0, 0])
    .domain([start, start]);

var y = d3.scaleLinear()
    .rangeRound([div_h, 0])
    .domain([0,0]);

var zoom = d3.zoom()
    .on("zoom", zoomFunction);

var svg = d3.select("svg");

svg
    .attr("height", div_h)
    .attr("viewBox", viewBox);

var gx = svg.append("g")
    .attr("class", "gx")
    .call(zoom);

var gy = svg.append("g")
    .attr("class", "gy")
    .call(zoom);

var gxy = svg.append("g")
    .attr("class", "gxy")
    .call(zoom);

gx.append("rect")
    .attr("class", "xzoombox zoom");
gx.append("g")
    .attr("class", "xaxis");

gy.append("rect")
    .attr("class", "yzoombox zoom");
gy.append("g")
    .attr("class", "yaxis");

gxy.append("rect")
    .attr("class", "xyzoombox zoom");

draw_axes();

pusher = new Pusher('de504dc5763aeef9ff52');
tradesChannel = pusher.subscribe('live_trades');
tradesChannel.bind('trade', function (data) {

    var now = new Date(data.timestamp*1000);
    var dt = Math.round((now.getTime()-start.getTime())/1000)+1;
    var dx = d3.select(".yaxis").node().getBBox().width;

    viewBox = "0 0 " + (dx + dt*5) + " " + div_h;
    d3.select("svg").attr("width", (dx + dt*5)) 
        .attr("viewBox", viewBox);

    x = d3.scaleTime().rangeRound([0, dt*5]);

    x.domain([now, start]);
    y.domain([data.price-500,data.price+500]);

    draw_axes();

});

function draw_axes() {
    var dy = div_h - d3.select(".xaxis").node().getBBox().height;
    var dx = d3.select(".yaxis").node().getBBox().width;

    y.rangeRound([dy, 0]);

    d3.select(".yaxis")
        .attr("transform", "translate(" + dx + ",0)")   
        .call(d3.axisLeft(y));

    d3.select(".xaxis") 
        .attr("transform", "translate(" + dx + "," + dy + ")")
        .call(d3.axisBottom(x));

    d3.select(".xzoombox")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", d3.select(".xaxis").node().getBBox().width)
        .attr("height", d3.select(".xaxis").node().getBBox().height)
        .attr("transform", "translate(" + dx + "," + dy + ")");

    d3.select(".yzoombox")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", d3.select(".yaxis").node().getBBox().width)
        .attr("height", d3.select(".yaxis").node().getBBox().height);

    d3.select(".xyzoombox")
        .attr("x", dx)
        .attr("y", 0)
        .attr("width", d3.select(".xaxis").node().getBBox().width)
        .attr("height", d3.select(".yaxis").node().getBBox().height);

}

function zoomFunction() {
    console.log("Zoomin..");
}

</script>```

arnthor3 commented 5 years ago

I don't believe this is a bug. Try adding .zoom { fill: none; pointer-events: all} and see if that fixes your problem.

mbostock commented 5 years ago

Please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.

When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗

d3 / d3-zoom

Zoom not working on rect with style fill:none #130