How to fix `react-d3-tree` in place?

Question

For some reason the default behaviour in this package is to allow users to move the trees around as they please.

How do you disable grabability?

I'd also accept an answer which suggests a different tree-graph package that looks nice and doesn't allow users to drag it around the screen.

The package is hosted at:

https://github.com/bkrem/react-d3-tree

And here is an example in CodeSandBox:

https://codesandbox.io/s/yq86mj80zx?file=/src/index.js

Answer 1

You can easily disable the "grabability" of the graph by changing the draggable argument in the Tree.

For example, the following would get your desired outcome:

<Tree
  data={treeData}
  onNodeClick={handleNodeClick}
  pathFunc={'straight'}
  zoomable={false}
  draggable={false}
/>