The d3js library has a built-in behavior called zoom, which applies dragging and zooming in the selected element and its children. It is hard to keep the scale and good visualization when you have a great zoom scale, and text labels, for example, can become ilegible.
I'm trying to find a way to ignore a specific element when zooming the area, but I don't see a way to achieve that.
In this case, there is a circle and a text inside a g. When I zoom a simple pack layout, I have the following behavior, with the following code:
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1.0)
.scaleExtent([0.1, 3])
.on("zoom", function() {
child.attr("transform", "translate(" + d3.event.translate +
")scale(" + d3.event.scale + ")");
});
I need to prevent text from being zoomed, staying static:
Is there a way to achieve that or it is neeed to rewrite the zoom behavior and reapply the scroll events also?
Related
I have a graph visualisation.
I've added zooming by scaling a <g> which holds everything.
That also resizes the nodes (circles) and their labels.
From what I've seen, keeping the size and only repositioning is done like this:
function zoomed() {
var t = d3.event.transform;
circle.attr("transform", function(d) {
return "translate(" + t.applyX(d[0]) + "," + t.applyY(d[1]) + ")";
});
}
However this won't work for me, because I already use translate for positioning the nodes by d3.forceSimulation(). I could apply the zoom like it's done above, but that would all fall back when the simulation gets started again - e.g. when dragging a node, which is done using:
function dragstarted() {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
...
How could I combine the simulation and the zooming?
One way I am thinking is to scale down all the nodes by inverse scale to what is used for zooming.
Other way could be styling down the things - smaller font, smaller circles, etc.
Other way could be tampering with the forces so the nodes go further from each other on zoom in.
For now I went the way of reversed scale for each node. Works quite fine, although it's a little bit of overhead I think.
Here's the code:
// Zooming
var zoom = d3.zoom();
zoom.scaleExtent([0.4, 3]);
zoom.on("zoom", function onZoomed() {
console.log("Zooming", d3.event);
var t = d3.event.transform;
zoomingGroup.attr("transform", t); // Using transform.toString()
svg.selectAll(".myGroup circle").attr("transform", "scale(" + 1/t.k + ")");
svg.selectAll(".myGroup .labelBox").attr("transform", "scale(" + 1/t.k + ")");
svg.selectAll(".myGroup .labelText").attr("transform", "scale(" + 1/t.k + ")");
});
I wanted to apply it to the whole <g class=".myGroup">, but changing it's transform to scale would interfere with forceSimulation()'s translate. Can you give me a tip to handle that? I could add another <g> and apply translate(...) to the parent <g> and scale(...) to the other.
I'm leaving this unaccepted in case someone has better (simpler) solution.
I'm trying to create some custom zoom functionality in d3.js. Currently the zoom is triggered on a single click and zooms in to focus only on the area that was clicked on.
Currently my code has a function zoom(d) that does exactly what it needs to. There is also a var zoomTransition which resides inside zoom() and is responsible for much of the functionality. I'm unfortunately unable to share much of my code.
The zoom needs to also occur on a mouse scroll. The difficulty I'm having is that this:
.on("wheel", function(d){
zoom(d);
});
disregards the scroll wheel direction. Zoom is called simply because the wheel is scrolled, either in or out.
Is there any way I can access the scroll direction and pass it into zoom()? Or a better way to do this?
Was looking for this:
.on("wheel", function(d){
var direction = d3.event.wheelDelta < 0 ? 'down' : 'up';
zoom(direction === 'up' ? d : d.parent);
});
More so javascript than d3, but that's how you access the scroll wheel information.
d3 has a zoom behaviour that you might find useful.
Example code:
var zoom = d3.behavior.zoom()
.scaleExtent([0, 10])
.on("zoom", redraw); //if you are sure that your zoom function is working just replace redraw with your zoom function
function redraw() {
return svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}
Full example:
http://bl.ocks.org/mbostock/2206340
Well I already got it working, but somehow when tested now it does not work anymore. So in my project I have a map that is zoom- and dragable. When zoomed in or dragged you can always click a Reset button to reset the whole presention. That works great.
So the zoom definition:
var g = svg.append("g");
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, maximumZoom])
.on("zoom", zoomed);
svg.call(zoom);
and the zoom function is:
g.attr("transform", "translate([0,0]).scale(" + 1 + ")");
zoom.translate([0, 0]);
zoom.scale(1);
The reset is done properly when the Reset button is clicked. But when now zooming or dragging anywhere, you actually see that it was the old zoom and location.
But the strange thing is that :
zoom.translate([0, 0]);
zoom.scale(1);
should fix that issue. As I said 1 month ago it worked properly.
In addition also the zoomed function:
function zoomed() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
I'm not 100% sure but it seems that calling the zoom event or let's say setting the zoom event later on on the svg element is fixing that issue.
So simply call
zoom.on("zoom", zoomed);
svg.call(zoom);
after everything is finished. I put it into a function that is loading the map. And now it's again working properly.
You can see the website here.
There is a question here
d3.js: pan with limits
Answering the question to limiting the pan movement. But this uses axis, which I do not have.
What I have is a force directed graph which has the ability to pan and zoom.
Now I have put a limit on the zoom using :
.call(d3.behavior.zoom().on("zoom", redraw).scaleExtent([0.8, 2]))
I am wondering how do I go about limiting the pan movement of this graph so i dont drag the network/graph outside of the viewport.
(The network may change size depending on the JSON file imported, so I can't use exact figures)
inner.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
There is no equivalent zoom.extent. You can override zoom's translate with mins and maxes inside your redraw function, though. For instance, if you wanted to limit zoom to stay within 500px of its original position:
function redraw() {
var oldT = yourZoom.translate()
var newT = [0,0]
newT[0] = Math.max(-500,oldT[0]);
newT[0] = Math.min(500,oldT[0]);
newT[1] = Math.max(-500,oldT[0]);
newT[1] = Math.min(500,oldT[0]);
yourZoom.translate(newT);
//The rest of your redraw function, now using the updated translate on your zoom
}
I use dagre and d3 to display graphs. The graph elements and the viewport can be dragged, and zoomed. After dragging/zooming the viewport whenever I redraw the graph (or draw another graph) the viewport stays where it was set previously, but resets on first interaction (jumps to [0,0], and default zoom ratio).
How to reset position of the viewport in d3 with function call?
Dagre author here - are you using the dagre demo or is this custom code? If you're using the dagre demo, I can confirm the behavior you're observing and the fix is to add this line:
svgGroup.attr("transform", "translate(5, 5)");
before this code block (dagre/demo.js, line 252 in my tree):
svg.call(d3.behavior.zoom().on("zoom", function redraw() {
svgGroup.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}));
I've updated the demo in the source code under this ticket: https://github.com/cpettitt/dagre/issues/56
Thanks!