magjac / d3-graphviz

Graphviz DOT rendering and animated transitions using D3
BSD 3-Clause "New" or "Revised" License
1.68k stars 103 forks source link

Node scrollIntoView doesn't work with bootstrap NavBar #233

Closed antinucleon closed 2 years ago

antinucleon commented 2 years ago

Thanks for the great project. I have an issue with scrollIntoView on nodes.

After rendering, for example, we have a node

<g id="my_node" class="node">
<title style="">my_node</title>
<polygon fill="none" stroke="#ab82ff" points="666.35,-9612 663.35,-9616 642.35,-9616 639.35,-9612 509.86,-9612 509.86,-9576 666.35,-9576 666.35,-9612" style=""></polygon>
<text text-anchor="middle" x="588.11" y="-9589.8" font-family="Times,serif" font-size="14.00" style="">my_node</text>
</g>

After execute:

const obj = document.getElementById("my_node");
obj.scrollIntoView({ block: 'center',  behavior: 'smooth' });

The view is moved to the node as expected. However, the NavBar is gone from the top. If we use scrollIntoView for NavBar, we find the NavBar is at the location we manually drag the figure.

So what is the correct way to use scrollIntoView for node while at the same time making NavBar stay on top after scroll?

magjac commented 2 years ago

I think you might have filed this issue on the wrong project. There's no NavBarin d3-graphviz. In fact there's no UI components at all. If the NavBar is part of your own code, I would need a complete example that demonstrates the problem. I any case, I would imagine that the problem is outside of d3-graphviz.

antinucleon commented 2 years ago

Sorry I am new to d3 and UI, any help/hint will be greatly appreciated.

Here is a complete example: in the search bar type a node name, such as "conv2d_bias_relu_50", then click search, the view will jump to the node and navbar will be gone. https://gist.github.com/antinucleon/28d85cf9cd2c0a99e5e1e1949b6da575

Thanks!