I'm trying to remove zoom completely from a svg.
zoom = d3.behavior.zoom()
.x(userNodesScaleX)
.y(userNodesScaleY)
.on("zoom", zoomed);
userMapSvg.call(zoom);
And this has added a 'rect.background' to the top of the SVG, which prevent the mouse event from reaching the other elements in the SVG.
So I decide to remove the zoom completely. remove the event, remove that rect. How can I do that?
Current code is
removeZoom = d3.behavior.zoom()
.on("zoom", null);
which doesn't work. It only toggles the event.
To stop any future zooming from transforming the page, remove the listener:
zoom.on("zoom", null)
To undo previous zoom transformations:
zoom.scale(1).translate([0,0]).event(userMapSvg)
http://bl.ocks.org/1wheel/6414125
The buttons at the top of the bl.ocks show both behaviors.
If neither work/are what you're looking for, posting a working example of the problem would be extremely helpful. You might also want to look through the zoom documentation.
Another way that I found to work is to set the zoom's extent and .extent and translateExtent to the width and height element ( thus disabling the zoom altogether ). And of course to set the scaleExtent to [1,1].
Try
userMapSvg.on(".zoom", null);
Related
I am trying to use d3.zoom but there are some issues that I am facing. Below is the simple code that I am using.
var treeGroup = d3.select('.treeGroup'); //parent g element
treeGroup.call(d3.zoom().on('zoom', function() {
console.log(d3.event.transform);
treeGroup.attr('transform', d3.event.transform);
}));
JS Fiddle: https://jsfiddle.net/nohe76yd/9/
Below are the issues that I am facing. (Please refer above JS Fiddle for code)
I can not zoom or pan on tree unless I do it on nodes, text labels or links hence I can not zoom on parent g object.
There is a stutter when I try to pan by clicking and dragging on nodes, text labels or links
When I zoom out an try to pan than tree disappears means there is too much translate.
If you have any idea why d3.zoom is behaving like this, please help me with the solution.
Taken from https://stackoverflow.com/a/20072986/6060606 and adapted to this question:
var rootSVG = d3.select('.rootSVG');
var treeGroup = d3.select('.treeGroup');
rootSVG.call(d3.zoom().on('zoom', function() {
treeGroup.attr('transform', d3.event.transform);
}));
This fixes the jitter and makes the entire SVG "draggable". The excellent explanation as to why this works can be found in the linked SO answer.
I've got a D3 radial dendrogram tree that I've applied d3.zoom to, but it jitters when I drag it. The zoom behaviour itself is fine, but the drag is not. I think there might be some issue with the way the 'g' element is translated (width / 2, height / 2 + 20).
Any help would be appreciated!
Here's a codesandbox of my tree: https://codesandbox.io/s/4zr43po6l9
change 'svg' to 'g', so the zoom affects the g element directly below the svg the zoom behaviour is attached to, and it's now smooth
let zoom = d3.zoom().on("zoom", () => {
g.attr("transform", d3.event.transform);
});
I'm not sure why it works like this to be honest
Perhaps changing the svg transform freaks out the event mouse x y position a bit as it bases its values on the svg, so you get that juddering effect?
I am trying to achieve consistent behavior between zooming in the view by buttons and mouse scroll. While I am able to specify the zoom step (0.5) using buttons (by calling zoom.scaleTo), I am wondering how I can do the same when using the mouse scroll. Should I somehow do this in "zoom" event callback, and there try to modify the event transform? Or should I capture wheel event's and there try to manually invoke d3.zoom functions? I'd like the mouse scroll to change scale every 0.5 step and maitain the center point of zoom to be the mouse location. Do you have any suggestions what is the best way to achieve this?
var svg = d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 600)
.call(zoom);
var mainContainer = svg.append("g");
please check with JSFiddle example i thinks you can help with this
click here
I've rendered a d3 map that has pan and zoom enabled, but when scrolling down the viewport either on desktop or mobile, the window gets stuck zooming in the map.
Is there a way to temporarily disable d3.zoom, while the window is scrolling?
I've seen ways of toggling the zoom/pan using a button as seen here: http://jsfiddle.net/0xncswrk/, but I wanted to know if it's possible without having to add a button. Here's my current zoom logic.
Thanks!
this.zoom = d3.zoom()
.scaleExtent([1, 8])
.on('zoom', () => {
this.svg.attr('transform', d3.event.transform);
});
this.svg = d3.select(this.el).append('svg')
.attr('width', '100%')
.attr('height', this.height)
.attr('class', 'bubble-map__svg-us')
.call(this.zoom)
.append('g');
EDIT: Wow old answer but never saw your comment. Sorry about that. Yeah sorry I forgot to consider mobile zooming.
In the documentation, perhaps this is new, but they recommend having more granular control of what zoom you allow by using zoom.filter. For touch related events, they also support zoom.touchable.
As specified in the d3-zoom documentation
To disable just wheel-driven zooming (say to not interfere with native scrolling), you can remove the zoom behavior’s wheel event listener after applying the zoom behavior to the selection:
selection
.call(zoom)
.on("wheel.zoom", null);
You can also consider just setting the scaleExtent to be [1,1] especially if it's just temporary so it locks the zoom to only one possible scale but preferably you opt for what the documentation says :P
Got here because I was dealing with a similar problem. Perhaps for anyone coming after this, a simple way to deal with this might be to use the filter() method that a zoom() instance provides. That will allow you to toggle between applying or ignoring zoom events altogether. It works a little better than temporarily setting null to watchers because - at least in my experience - the events then still get recorded and stacked. As a consequence, you would zoom in or out in unexpected leaps once you re-enabled the handler. The filter actually really ignores what's going on, it seems. To implement:
let isZooming = true; // Use controls to set to true or false
zoom()
// Make sure we only apply zoom events if zooming is enabled by the user
.filter(() => isZooming)
.on('zoom', event => {
// Specify whatever you want to do with the event
});
Doc: https://github.com/d3/d3-zoom#zoom_filter
I'm new to D3 and would like to implement a click-drag-zoom similar to what is shown here: http://www.highcharts.com/demo/line-time-series
I already have a line graph I have built, but am confused as to how to implement this.
I guess I need some JS event handlers to find where my mousedown and mouseup happens. But how do I create the shading that occurs on the graph when the user is dragging?
You'll probably want to use a brush to do this in d3.js. You can see an example that I put together at http://bl.ocks.org/1962173 which does something similar.
The relevant code is:
var brush = d3.svg.brush()
.x(x)
.extent([d3.time.monday(now),d3.time.saturday.ceil(now)])
.on("brush", display);
where display is a function that redraws data based on the current extent of brush. This way you don't need to try and hook your own handlers or even worry about resizing the highlighted region at all.