D3.js - Zooming while keeping sizes, with d3.forceSimulation() - javascript

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.

Related

d3.js: Zoom on click event

I was trying to get same behavior Wil Linssen's implementation
but on d3.js version 4.
I am quite confused with zoom api in version 4.
The changes that I made in the original implementation is:
zoom.translate() replaced with
d3.zoomTransform(selection.node()) and appropriate points added instead:
svg.attr("transform",
"translate(" + t.x + "," + t.y + ")" +
"scale(" + t.k + ")"
);
This one:
zoom
.scale(iScale(t))
.translate(iTranslate(t));
replaced to
var foo = iTranslate(t);
zoom.
translateBy(selection, foo[0], foo[1]);
zoom
.scaleBy(selection, iScale(t));
But it's still has a problem, looks like with scale, zoom out...
Example: Example on d3.v4 - jsfiddle
Thanks for the help
After researching the most easiest way to use d3 v4 api that provides interpolation etc out of box. In original question zoom implemented from scratch, that doesn't make sense in version 4. Solution is similar to #Nixie answers and has few lines of code.
This version includes pan as well, if you do not need, remove svg.call(zoom);
Final example: Zoom D3 v4 - jsfiddle
One interesting note:
The function:
function transition() {
svg.transition()
.delay(100)
.duration(700)
.call(zoom.scaleTo, zoomLevel);
//.on("end", function() { canvas.call(transition); });
}
call(zoom.ScaleTo, zoomLevel) - will zoom to the center of page. But if you need the center of an image, use this one: call(zoom.transform, transform);
Where transform is a function that sets center of your image. For example of such function:
function transform() {
return d3.zoomIdentity
.translate(width / 2.75, height / 2.75)
.scale(zoomLevel)
.translate(-width/2.75, -height/2.75);
}
This piece of code does not resolve all the problems, but could be a starting point. In D3 v4 you can transition zoom in one line of code (see also https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform)
function interpolateZoom (translate, scale) {
return selection.transition().duration(350)
.call(zoom.transform,
d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale))
}
Modified example: https://jsfiddle.net/2yx1cLrq/. Also, you need to replace selection with selection.node() in all calls to d3.zoomTransform
I've used Angular for this, and it's in my opinion the simplest and cleanest so far. I already had scroll to zoom behavior, adding mouse clicks was easy. Please note I import my d3 functions using ES6 modules.
Example:
import { event as d3event, zoom, scaleExtent, selectAll, transition, duration } from 'd3';
My existing zoom (mouse scroll)
this.zoom = zoom().scaleExtent([1, 8]).on('zoom', this.zoomed.bind(this));
// this.chart is my map chart svg created by d3
this.chart.call(this.zoom)
zoomed() {
// this.g is a <g> element appended to the chart that contains all countries in my case.
this.g
.selectAll('path') // To prevent stroke width from scaling
.attr('transform', d3event.transform);
}
What I added to get zoom buttons:
<!-- My markup -->
<button (click)="zoomClick(1.5)">Zoom in</button>
<button (click)="zoomClick(0.5)">Zoom out</button>
zoomClick(level): void {
this.chart.transition().duration(200).call(this.zoom.scaleBy, level);
}

D3 mousewheel zoom direction

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

Position of tree after node expansion

I recently took up D3 for a project, and i am facing an issue with the tree layout. When i initially load the tree layout it stays nicely within the SVG, as seen on the screenshot below.
However, once i start opening the nodes, the more nodes i open, the more start going up and thus become invisible, as seen on the images below.
When i start opening nodes:
When all nodes are opened:
As you can see i have made the svg scrollable vertically so that i can see bigger trees.
Here is how i create the tree layout:
var tree = d3.layout.tree()
.nodeSize([55,30]);
Right now I found a solution by increasing the height of the 'g' element which holds all the nodes every time i click on a node that has children, but it is not a good solution because this causes the whole tree to "jump" every time this happens.
//creates the <g> element
var gWidth = 90;
var gHeight = 250;
var vis = svg.append("g")
.attr('id', 'group')
.attr("transform", "translate(" + gWidth + "," + gHeight + ")");
function updateSvg(node){
//moves the g element 50px down on each click that has a child
if(node.children){
gHeight +=50;
vis.attr("transform", "translate(" + gWidth + "," + gHeight + ")");
}
else{
gHeight-=50;
vis.attr("transform", "translate(" + gWidth + "," + gHeight + ")");
// }
}
I am also increasing the SVG height if there are more than a certain amount of nodes, but i think this is out of scope for my current issue.
Is there something I am missing?
I can see two ways of trying to solve this:
1. Scroll your container automatically to avoid the jump, in your solution with the gHeight variable:
document.getElementById("container").scrollTop += 50;
I am really not sure of this, though, so I think you'll do better with:
2. Use d3 zoom & pan methods The zoom behavior works pretty well, see
https://github.com/mbostock/d3/wiki/Zoom-Behavior
It boils down to
var zoom = d3.behavior.zoom();
svg.call(zoom);
and so you can get rid of the scrollbars and gHeights, and basically don't have to worry anymore about the window boundaries.

Keep scale of element on zooming

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?

How do I limit the panning on a force directed graph layout without axis ? D3/JS

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
}

Categories