Implementing drag and zoom - differences from d3

[elpddev]

Hi,

In d3, the design pattern for implementing the drag behavior is to iterate on the nodes and activate the force.drag function on each. So does with webcola.

The design pattern for implementing the zoom behavior in d3 is to put it on the main root like svg.

In WebCola, that did not work for me. When dragging, the zoom always activated also and there was an effect of all the node dragging.

After research, it seems in the WebCola examples, the zoom behavior is attached to a special sibling background node, that has no children and is constructed just for that purpose. The main graph node tree is build in the next sibling node.

https://github.com/tgdwyer/WebCola/blob/master/WebCola/examples/onlinebrowse.html#L51

outer.append('rect')
   .attr('class', 'background')
  .attr('width', "100%")
  .attr('height', "100%")
  .call(d3.behavior.zoom().on("zoom", redraw));

Is this the recommended design pattern when integrating WebCola with d3?

[AndrewJakubowicz]

In my library that uses webcola I've used the zoom behaviour and put it on the root svg. It hasn't interfered with the dragging behaviour. Are you able to share the code that causes the issue?

My zoom code: https://github.com/SpyR1014/networkVizJS/blob/3e1b22cef33151f5e607276fa36e96467ab19fe6/src/networkViz.ts#L165

I'm not able to answer regarding the webcola example code.

[elpddev]

@SpyR1014 Thank you for the reply. Currently I cant share the code I'm working on. But it is based on the onlinebrowser example. For now, the difference I see is that you use d3v4 and I use v3..