Zoom Not Working On Rect With Style Fill:none · Issue #130 - GitHub

Trang chủ » Svg G X Y » Zoom Not Working On Rect With Style Fill:none · Issue #130 - GitHub

Có thể bạn quan tâm

Skip to content Dismiss alert {{ message }} / d3-zoom Public
  • Notifications You must be signed in to change notification settings
  • Fork 142
  • Star 529
  • Code
  • Issues 16
  • Pull requests 7
  • Actions
  • Security

    Uh oh!

    There was an error while loading. Please reload this page.

  • Insights
Additional navigation options Zoom not working on rect with style fill:none #130New issueNew issueClosedClosedZoom not working on rect with style fill:none#130@ndru7t7

Description

@ndru7t7ndru7t7opened on Feb 18, 2018

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>```

Metadata

Metadata

Assignees

No one assigned

Labels

No labelsNo labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

You can’t perform that action at this time.

Từ khóa » Svg G X Y