bkrem / react-d3-tree Goto Github PK
View Code? Open in Web Editor NEW:deciduous_tree: React component to create interactive D3 tree graphs
Home Page: https://bkrem.github.io/react-d3-tree
License: MIT License
:deciduous_tree: React component to create interactive D3 tree graphs
Home Page: https://bkrem.github.io/react-d3-tree
License: MIT License
For large data sets with loads of parallel nodes the tree width (or height) gets very big.
Spacing could be optimized in such cases (margins between the nodes).
It would also be nice to be able to provide a custom render function for each node.
Anyways, nice job! I'm looking forward to what else you might add in the future.
Include the SVG transform attribute as a prop to a Node's textLayout. I gave a simple implementation a shot in this PR.
One use case: rotate Node names, such that longer names don't overlap with Nodes at the next level of the Tree.
package.json
versionnpm publish
In /src/Tree/index.js, line 187, the handleNodeToggle
method only calls the handleOnClickCb
method if this.props.collapsible
is true.
I don't think it makes sense to make the onClick
prop dependent on using the collapsible
prop.
Thank for the beautiful plugin! I have a question/feature request. Is it currently possible to hide expanded children of previously clicked node when another node is clicked? I have a horizontal phase/subphase tree with large dataset and want to leave open only the children of the clicked node and have others that were opened before closed. Did not find this feature in documentation. Please let me know.
Being able to arrange the labels of each node in a flexbox-like way would make layouts more consistent and less frustrating when node labels vary strongly in length.
https://github.com/dlmanning/react-flexbox-svg
http://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.html
Use an options object (i.e. parse[FileType](fileName, opts)
signature) rather than individual parameters to simplify setting parse configs for specific file + provide extensibility.
Currently it isn't possible to specify a handler at the <Tree />
level for node onClick
events.
Is there any work around for the long rendering time for large datasets? I have approximately 500 nodes and the rendering freezes the page for about 1 minute until finally displayed.
Also occurs when using your data from 'json-example.json'.
The ability to collapse all open nodes on the same depth as a new one is opened. Would be a great feature as the tree gets large with lots of traversing nodes.
the translate now can only support px
Tried:
Pass data to Tree component as state.
Render the tree.
Add children to tree data and write in state.
Nothing happens with Tree.
I found why it does not work:
it is used deepEqual(this.props.data, nextProps.data) (i also tried a strict mode)
if i change it to this.props.data !== nextProps.data - the tree component updates correctly.
Besides elbow, diagonal, and straight, would be great to pass a custom func. My use case is an elbow like func with 4 segments instead of 2.
Looks like we can just add function as an acceptable propType in the enum and call the function if a function is given otherwise check for 'straight', 'diagonal', and 'elbow' as is currently done.
Implements feature request made in #19.
Rebind Tree via bindZoomListener
if translate prop changed in order to prevent tree jumping on zoom/pan.
Currently when a node is expanded and then quickly collapsed again (before the transition completes) the child nodes are orphaned and persist in the DOM even as the underlying data changes.
Due to the order of rendering nodes before links in /src/Tree/index.js
(line ~282), nodes appear below links. This can be verified by setting the node color to a light color, and leaving the link color its default black.
I'm making an assumption on this, but I would think most users would prefer the links to appear as though they are passing underneath (or through) nodes, and not passing above them.
Hi,
Is there any method to render the node itself as a pre-defined image ?
Using fill="url(...)"
could be a solution but I can't any way to define a SVG image or pattern
Thanks
Hi there, first of all awesome work on this library.
I am very very new to using d3, I was wondering if it is possible to render rectangles instead of circles.
I am trying to implement something along the lines of this: http://justincy.github.io/d3-pedigree-examples/basic.html , and would love your help.
Looking into your implementation https://github.com/bkrem/react-d3-tree/blob/master/src/Node/index.js#L91
I can see that you have hard coded circles, would you consider changing this so that whoever is using this library can choose the shape and you could have the circle by default?
Cheers
class NodeLabel extends React.PureComponent {
render() {
const {className, nodeData} = this.props
return (
<div className={className} style={{border: '1px solid black'}}>
<h2>{nodeData.name}</h2>
{nodeData._children &&
<button>{nodeData._collapsed ? 'Expand' : 'Collapse'}</button>
}
</div>
)
}
}
<Tree
data={[treeObj]}
orientation="vertical"
translate={{x:400, y: 50}}
allowForeignObjects
nodeLabelComponent={{
render: <NodeLabel className='myLabelComponentInSvg' />,
foreignObjectWrapper: {
y: 24
}
}}
/>
I want to have my own boxes design, but that the lines will be connected to the boxes and not circles. Is that achievable now?
Thanks
As a separate prop maybe called children
it would be great to pass children into the nodeSvgShape
to allow for SVG nodes that are more complex than a shape.
I may be able to get the implementation working but might need some help.
I'd like to display a popover or snackbar onHover of each node. Requesting an onHover prop which passes the node data to a function on user hover.
How to use this great library properly with Server-Side Rendering (SSR)
ReferenceError: window is not defined
- react-d3-tree.min.js:1
[frontend]/[react-d3-tree]/lib/react-d3-tree.min.js:1:4937
- react-d3-tree.min.js:1
[frontend]/[react-d3-tree]/lib/react-d3-tree.min.js:1:4899
- react-d3-tree.min.js:1 e.exports
[frontend]/[react-d3-tree]/lib/react-d3-tree.min.js:1:5409
return window&&document&&document.all&&!window.atob
I have filters associated with different levels of the tree, as the user toggles which level they are on, I'd like the tree to respond to be open to that level.
I tried passing different values to initialDepth as props, however there is no rerender.
Is this possible?
@bkrem same goes for the text attribute each node text/attributes can be positioned individually.
I hope you get my idea its pretty clear in the demo picture below :) waiting for you reply and what are you thoughts about this features :)
sorry if this is alreay covered but could not find way to change style for selected node and reset for unselected node.
If the data set changes (ie user filters), the tree rerenders with all nodes open.
I am using a dynamic initial depth prop to maintain which level is open, and I would like the tree to reread the initial depth prop as the data set changes to stay at the current highest level open.
As the user clicks a node, I will pass the depth to state. In conjunction with #46 the other nodes will close, so the clicked node will be at the highest level. The user can filter data, and the tree will render new nodes to the same level.
Current structure of object expected by styles
prop is too nested.
Refactor current:
{
links: <svgStyleObject>,
nodes: {
node: {
circle: <svgStyleObject>,
name: <svgStyleObject>,
attributes: <svgStyleObject>,
},
leafNode: {
circle: <svgStyleObject>,
name: <svgStyleObject>,
attributes: <svgStyleObject>,
},
},
}
to:
{
links: <svgStyleObject>,
nodes: {
circle: <svgStyleObject>,
name: <svgStyleObject>,
attributes: <svgStyleObject>,
},
leafNodes: {
circle: <svgStyleObject>,
name: <svgStyleObject>,
attributes: <svgStyleObject>,
},
}
When initial depth one is set, the links are not aligned with the nodes. The nodes are evenly spaced and the links are evenly spaced, however they do not have the same spacing. Initial depth 0 and 2 working as expected. Any ideas? See pictures below:
<Tree data={[data]} translate={{x: 300, y:300}} initialDepth={1} styles={{links: {stroke: 'pink', strokeWidth: 3}}} />
Css is messed up when the leaf node label is long, the leaf nodes overlap
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.