jpb12 / react-tree-graph Goto Github PK
View Code? Open in Web Editor NEWA react library for generating a graphical tree from data using d3
License: MIT License
A react library for generating a graphical tree from data using d3
License: MIT License
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:
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."
To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:
.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.
Greenkeeper has checked the engines
key in any package.json
file, the .nvmrc
file, and the .travis.yml
file, if present.
engines
was only updated if it defined a single version, not a range..nvmrc
was updated to Node.js 10.travis.yml
was only changed if there was a root-level node_js
that didn’t already include Node.js 10, such as node
or lts/*
. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.For many simpler .travis.yml
configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
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?
1.5.0
to 1.6.0
.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.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
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 ?
1.4.1
to 1.4.2
.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.
2019-03-07
The new version differs by 6 commits.
adaa23e
1.4.2
2d03a67
Update changelog
858fea4
Resolve a situation where different default exports referencing the same (#2737)
6903425
Update changelog
af41561
Fix an issue where the same hash was generated when different variables (#2741)
d27c0f6
Docs: Fix return type (#2738)
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
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)
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
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:
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.