semantic zooming of the force directed graph in d3

Question

Many cases have been shown for force directed graph geometric zooming by SVG Geometric Zooming.

In geometric zooming, I only need to add a transform attribute in zoom function. However, in semantic zooming, if I only add a transform attribute in node, links won't connect to node. So, I am wondering whether there exist a solution for geometric zooming for force directed graph in d3.

Here is my example with geometric zooming following previous case. I have two problems:

1. When I zoom out, then drag whole graph, the graph will strangely disappear.
2. Using the same redraw function

function zoom() {
  vis.attr("transform", transform);
}
function transform(d){
  return "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")";
}

This only update one svg element's "transform" attribute. But how to make the function to change the node position?

But what I want to do is semantic zooming. I have tried to modify zoom and transform function, but not sure the right way to do. Here is what I try. Functions I have changed:

function zoom() {
  node.call(transform);
  // update link position
  update();
}
function transform(d){
  // change node x, y position, not sure what function to put here.
}

---

Answer 1

You have to both transform the node and redraw the paths.

The idea of "semantic zooming" is that you change the scale of your layout but not the size of individual elements.

If you have set up the zoom behaviour as in the linked example, it automatically updates the x and y scales for you. You then re-set the position of the nodes based on these scales, and you can also re-set the position and shape of the links.

If your links are straight lines, re-set the x1,y1,x2 and y2 positions using the updated x and y scales. If your links are paths created with d3.svg.diagonal and the x and y scales, re-set the "d" attribute with the same function.

If you need more specific instructions, you'll have to post your code.