jpb12 / react-tree-graph Goto Github PK

I am trying to trigger zoom in the tree with d3-zoom, but for that d3 needs to have a g element surrounding all elements, like:
<svg><g>elements</g></svg>
where we can apply transforms with it.

Is any way to zoom the tree?

I have a use case where the event object, that the handleClick method of a Node or Link component receives, should be passed to the click handler. Right now it is discarded.

In a fork I have implemented this use case. Essentially it looks like this (in the case of a Node component):

handleClick(event) {
  this.props.onClick && this.props.onClick(this.props[this.props.keyProp], event);
}

Would this be a useful enhancement? And if so, should I create a pull request?

I would like to see just exactly how the demo is being implemented. Could the code for it be added to the repo?

Hi
Great work! I have encountered an issue where the tree rendering goes wrong for children if I dynamically add nodes to a parent.

Steps - add a few children, go back and add more children to the parent. The child nodes get duplicated. Please see the attached image.

anything you can think of that I am doing wrong?

Is there any chance to use an image instead of shape?

I have Nodes with integer keys. The tree is generated like this:

                  <Tree
                    animated={true}
                    duration={500}
                    data={this.state.clusters[this.state.selectedClusterIndex]}
                    height={800}
                    width={1500}
                    keyProp="key"
                    textProps={{ x: 0, y: 15 }}
                    gProps={{
                      className: "node",
                      onMouseEnter: this.handleMouseEnter,
                      onMouseLeave: this.handleMouseEnter,
                    }}
                    svgProps={{ id: "treeSvg" }}
                  />

Where .this.handleMouseEnter is defined as:

  handleMouseEnter = (event, nodeKey) => {
    console.log(nodeKey);
  };

But nodeKey is always undefined. I have looked in the react dev tools, and each Node object has a 'key' prop correctly added to it.

Am I doing something wrong?

Is there a support for event of drag drop? ex: drag node and drop it on another node ( useful for move child to another parent.. ) so that we have ref for old parent, new parent and child ref

Hello! It's possible to change the "z-index" of the tree leaves? I tried to put a tooltip, but the tree nodes appear on the tooltip.
I tried also the follow:
<Tree ...>
but I still obtain the same result.
Have you any suggestions for this problem?

Is there any way to add text for links connecting two nodes ?

I can use react-tree-graph to display my tree now!
But each layer of the tree has too many nodes, the nodes are very close vertically.

Now I can only solve this problem by setting height of <APP> like
<App value={data} high={3000}/>.

Is there any other ways to set the smallest distance between nodes vertically?

I have tried adding my image in defs tag with pattern and then tried referencing it in circle element.
I have seen this explained on stack overflow. and here is the example on codepen.
code pen example

My implementation using the current available functions in libraries documentation.

<Tree data={data} height={400} width={400} svgProps={( <defs> <pattern id="img1" width="100%" height="650"> <image href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30" width="380" height="267" /> </pattern> </defs> ) } circleProps={{ fill: 'url(#img1)' }} />

Problem is, it takes these defs and pattern as the props for svg tag; adding them inside svg tag. I want them to be wrapped inside svg tag. Some thing like this

<svg> <defs> </defs> </svg

instead of

<svg defs=[object] </svg
(this is what is being interpreted by library)

If we can figure out a way to add images in nodes?? That would be great

Is it possible to add icon inside circleProps. I have tried with mask like below
<mask id="myMask" maskContentUnits="objectBoundingBox"> <rect fill="white" x="0" y="0" width="100%" height="100%" /> <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> </mask>
<Tree data={data} height={400} width={400} svgProps={{ className: 'custom' }} nodeRadius={10} circleProps={{ fill: 'red', mask: 'url(#myMask)' }} animated>

But if we need to pass dynamic icons or images how can we do it

My designer wants a tree that your library works great for, but he wants rectangles with rounded edges rather than circles. This works best with rect tags rather than circle tags. I created a fork where I've create a "rect" boolean prop (which will then be checked and render a rect rather than a circle) and "rectProps" used rather than circleProps. This is a bit redundant since I could have easily just used circleProps, but I felt like it was a bit confusing to pass circleProps when I'm rendering rects. Maybe there's a better way.

A couple of other small changes on that fork:

• Changed proptype of pathFunc from string to func. It was complaining about receiving the wrong prop when I passed a function but worked fine.
• I also passed "wrappedTextProps" as the last prop to the text element, that way I can overwrite the default dx and dy props given to it.

Let me know if you're interested in a PR. I can use the lib from my fork if not, but wouldn't mind contributing.

Once we try to display only color node without having name (key) of the children it shows run time warning.
"Warning: Each child in an array or iterator should have a unique "key" prop."

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

I've tried using inline styles through textProps, and direct css, but can't find a way to do it.

Hey,

what would be the way to change the orientation of the tree?

Hi, How are you?
I am using your library by viewing Tree view. (react-tree-graph)
I want to set each text to background.
How can I do?

The devDependency rollup was updated from 1.5.0 to 1.6.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi, I am having a tad bit trouble integrating the graph. It is a great library indeed, But do i have to add some styling to the svg paths connecting the children?

Warning: flattenChildren(...): Encountered two children with the same key, `0:$Level 4: B`. Child keys must be unique; when two children share a key, only the first child will be used.

Getting this whilst loosely replicating your demo, is this a React warning that should be ignored whilst using this library?

Kind regards.

   const data = {
      name: 'Top Level',
      attributes: {
        keyA: 'val A',
        keyB: 'val B',
        keyC: 'val C',
      },
      children: [
        {
          name: 'Level 2: A',
          attributes: {
            keyA: 'val A',
            keyB: 'val B',
            keyC: 'val C',
          },
          children: [
            {
              name: 'Level 3: A',
              children: [
                {
                  name: 'Level 4: A'
                },
                {
                  name: 'Level 4: B',
                  children: [
                    {
                      name: 'Level 5: A'
                    }
                  ]
                }
              ]
            },
            {
              name: 'Level 3: B'
            },
            {
              name: 'Level 3: C',
              children: [
                {
                  name: 'Level 4: B',
                  children: [
                    {
                      name: 'Level 5: B'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          name: 'Level 2: B',
          children: [
            {
              name: 'Level 3: D'
            },
            {
              name: 'Level 3: E',
              children: [
                {
                  name: 'Level 4: C'
                }
              ]
            },
            {
              name: 'Level 3: F'
            }
          ]
        }
      ]
    };

How can we make it possible that on clicking on any child node that particular node act as parent so we can view the detailed branch of that particular node and add reset button to bring everything back to default. Can you please tell me how to implement this on my own code?

Is it possible to add popup menu on node when right click on node?
Also how can change node icon need some svg?
and the last one is it possible to have straight lines ?

The devDependency rollup was updated from 1.4.1 to 1.4.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hey there, nice lib, there just seems to be an issue with units.
The tags have eg transform=translate(10,90) but the units are missing.

BR, Sebastian

I'm testing demo and I've set keyProp to _id. now clicking on children nodes give an error that says children.node is undefined in setClassName.
this issue has been mentioned I in #10 but I don't think the problem is about using the same key.
this is data :

    {
name: 'Colour',
_id: '41',
children: [
    {
        name: 'Black',
        _id: '42',
        children: []
    },
    {
        name: 'Black',
        _id: '43',
        children: []
    },
    {
        name: 'Yellow',
        _id: '44',
        children: []
    }]
    }

Hi @jpb12 !

Great job with this react-tree-graph lib, big fan here !

I was having a look at your demo here and was wondering how you managed to make it responsive so that it animated smoothly to resize the tree graph when you change the window size ?

I see in the documentation that you need a width and height props.
It looks to me as you have used some auto resizing lib to pass recomputed width & height down to your tree component. Is that it ?
If so can you tell me which lib you use ? I can't seem to be able to find one that works as it does in your demo.

Thanks a lot for your help and again : gr8 job 👍

Whenever you pass in gProps => gProps={{ onClick: this.click }}, it also assumes you meant to pass in className too.

I'm guessing the implementation just does a props = gProps and not a merge Object.assign(props, gProps) (replace only what's new).

It has the side effect of overriding the default .node class.

Not a big deal, but I don't think it was intended, and I don't know what other gotchas that might bring up.

Can see example @ https://jpb12.github.io/react-tree-graph/#clicking , all other graphs have the default '.node' class except the click, and custom node props example.

Btw great library.

Hi, react-tree-graph looks like a nice, focused component. I'm experiencing some difficulty with a linkClickHandler though. The documentation states that it will receive source and target arguments, but I get undefined in both cases when the function is called. A nodeClickHandler, which receives a single node argument, does get the correct nodename.

Below is sample code (which is contained in the render method of a simple custom component). When for instance Node2 is clicked , the console output is 'Node2'. But with every link that is clicked, the output is 'undefined undefined'

let data = {name: 'Root', children: [{name: 'Node1', children: []}, {name: 'Node2',children: []}]};
let linkFn = function(source, target) {console.log(source, target)};
let nodeFn = function(node) {console.log(node)};

return (
  <Tree data={data} height={400} width={400} linkClickHandler={linkFn} nodeClickHandler={nodeFn} />
);

This demo is really awesome!
https://jpb12.github.io/tree-viewer/

I'd like to take a look and learn how to use this lib. Is that possible?

Hi! I have problem with one task. After onClick event on node I have to display popup with user data from tree. First problem is when I add keyProp: "example-1" to data tree object then onClick event parameter node is undefined. When I delete keyProp from object, it works correctly but it keyProp in my case is required. Second problem is how to pass to onClick event parameter with whole object data? Not only node name but also id, username etc. Thank for help! ;)

Example of my object:
{ id: 2, username: "test123", firstName: "test", lastName: "test", id_parent: 6, role: "user", name: "test test", pathProps: { className: "test-link link" }, circleProps: { className: "test-circle" }, keyProp: "test-test", children: [ { name: "Aquamarine", keyProp: "test-test-1", children: [] }, { name: "Cyan", keyProp: "test-test-2", children: [] }, { name: "Navy", keyProp: "test-test-3", children: [] }, { name: "Turquoise", keyProp: "test-test-3", children: [] } ] },

I'm using your demo tree-viewer.
But there is a problem: when I click on a node, the sub tree and the original tree are all on the screen, but not replace the original tree.
Why does this happen?
Thank you!

I have tried to add both onContextclick and onDblclick but the functions are not being called and I don't see them attached to the g node.

I am looking for a solution to either have a custom button next to the text or allow for some other mouse gesture to have two different actions for a node.

How would I change the offset of root node only?

For example:

A Node (Logo1.png) -> B Node (Logo2.png) - C Node (Logo3.png)

The following graph was rendered using the default configuration of version 2.0.0

Hey,

Currently, if to children have same name it results in an error

Encountered two children with the same key

What would be a simplest way to implement separate sorting key and display name?

I would like to know whether it is possible to add text inside pathProps

Hi,
I've learned react tutorial, and install react-tree-graph in folder project/www/static using
npm install react-tree-graph --save
The folders of the project is as following:

project
  -www
    -static
      -node_modules
        -...
        -react-tree-graph
        -package-lock.json
    -templates
      -page.html

My codes are as following:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tree</title>
</head>
<body>
    <style>
        .c{
        display:inline;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <script type="text/babel">
        import Tree from 'react-tree-graph';
        $(document).ready(function () {
            $('#generateTree').click(function () {
                $.post('/generate_tree/' + $("#project_id").val(),function (data, status) {
                    alert('data：'+data+'\nstatus：'+status);
                })
            })
            $("#loadTree").click(function () {
                $.get('/load_tree/'+$("#project_id").val(),function (data) {
                    const data0 = {
	                    name: 'Parent',
	                    children: [{
		                    name: 'Child One'
	                    }, {
		                    name: 'Child Two'
	                    }]
                    };

                    const project_tree = <Tree data={data0} height={400} width={400}/>;
                    ReactDOM.render(
                        project_tree,
                        document.getElementById('content'));
                });
            })
        })
    </script>
<div id="container" style="width:1912px">

<div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">Tree</h1></div>

    <div id="menu" style="background-color:#FFD700;height:30px;width:1912px;float:top;">
        <form class="c" id='tree'>
            Please input project id: <input class="c" type="text" id="project_id" style="width:150px">
            <button type="button" class="c" id='generateTree'>Generate</button>
            <button type="button" class="c" id='loadTree'>Load</button><br>
        </form>
    </div>

    <div id="content" style="background-color:#EEEEEE;height:900px;width:1912px;float:left;"></div>
</div>
</body>
</html>

But when I open the page in browser, it always came out the error:
Inline Babel script:2 Uncaught ReferenceError: require is not defined
at line
import Tree from 'react-tree-graph';

Is there anything wrong in my code? Why can't it find react-tree-graph?
Thank you very much!

Great library!
I'm not sure if this is a bug, or if I'm just doing it wrong:

<Tree
    animated={true}
    duration={750}
    data={this.state.data}
    height={800}
    width={1500}
    textProps={{ x: 0, y: 15 }}
    gProps={{
        className: "node",
    }}
/>

This renders correctly, but, when this.state.data changes, the new tree is overlaid on top of the old one. Do I need to manually clear the SVG?

I'm trying to use an image(svg) as the image for the node circle and it won't work. I've tried

    <Tree
          data={this.props.scenes}
          height={400}
          width={800}
          nodeOffset={30}
          animated={true}
          svgProps={{
            className: "custom"
          }}
          circleProps={{ fill: "url(#img1)" }}
          gProps={{
            onClick: () => this.onClick()
          }}
    >
          <defs>
            <pattern id="img1" width="100%" height="200">
              <image href={Square} x="-50" y="0" width="300" height="267" />
            </pattern>
          </defs>
    </Tree>

Hey,

Any plan to make the tree viewer a package rather then example?
https://jpb12.github.io/tree-viewer/

Thanks!

Please excuse newbie question, but can you show an html file that will do this? Or am I missing something?

The structure of my tree is:

node0
{
     'name': 'P1'
     'type': 'Project'
     'value': [......]
     'children': [node1, node2, ......]
}

How can I get value of the node when I click on the node?
Thank you!

Is it possible to alter the visible width of the 'text' elements in a node?

I have some long strings I'd like to display, but they are visibly truncated, and I don't see a CSS fix for this. Actually - I can't see anywhere in the source that's limiting the visible width either.

I've made a quick example here based on the docs: https://codesandbox.io/s/practical-newton-pq7df

In SVG 1.1 elements did not support transform attributes. In SVG 2 it is proposed that they should.
Chrome and Firefox implement this part of the SVG 2 specification, Safari does not yet do so and IE11 never will.

A fix or a workaround is highly appreciated.

I'm new in JavaScript, and I want to use react-tree-graph to display a tree, but I have a problem:
I've already constructed data in JavaScript, how to display the tree?
I tried the way in the examples, but nothing happened and tell me an error "can't find tree.js".
So I have 2 questions:

1. how to use react-tree-graph package?
2. how to display the tree?

my codes are:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tree</title>
</head>
<body>
    <style>
        .c{
        display:inline;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="../static/react-tree-graph/scr/components/tree.js"></script>
    <script>
        $(document).ready(function () {
            $('#generateTree').click(function () {
                $.post('/generate_tree/' + $("#project_id").val(),function (data, status) {
                    alert('data：'+data+'\nstatus：'+status);
                })
            })
            $("#loadTree").click(function () {
                $.get('/load_tree/'+$("#project_id").val(),function (data) {
                    const data0 = {
                     name: 'Parent',
                     children: [{
                      name: 'Child One'
                     }, {
                      name: 'Child Two'
                     }]
                    };
                });
            })
        })
    </script>
<div id="container" style="width:1912px">

<div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">Tree</h1></div>

    <div id="menu" style="background-color:#FFD700;height:30px;width:1912px;float:top;">
        <form class="c" id='tree'>
            Please input project id: <input class="c" type="text" id="project_id" style="width:150px">
            <button type="button" class="c" id='generateTree'>GenerateTree</button>
            <button type="button" class="c" id='loadTree'>DisplayTree</button><br>
        </form>
    </div>

    <div id="content" style="background-color:#EEEEEE;height:900px;width:1912px;float:left;">
        <Tree
            data={data0}
            height={200}
            width={400}
            />
    </div>
</div>
</body>
</html>

Thank you very much!