bkrem / react-d3-tree Goto Github PK

• Implementation
• Unit test
• Docs

when i do import Tree from 'react-d3-tree';
can someone help me plz
thanks

Css is messed up when the leaf node label is long, the leaf nodes overlap

• Implementation
• Unit test
• Docs

@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 :)

1. Bump package.json version
2. Generate new minified bundle
3. Regenerate component/util docs
4. npm publish

Currently it isn't possible to specify a handler at the <Tree /> level for node onClick events.

• Implementation
• Unit test
• Docs

• Implementation
• Unit test
• Docs

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.

• Implementation
• Unit test
• Docs

• Implementation
• Unit test
• Docs

• Implementation
• Unit test
• Docs

• Implementation
• Unit test
• Docs

• Implementation
• Unit test
• Docs

the translate now can only support px

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.

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

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.

• Implementation
• Unit test
• Docs

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'.

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.

• Implementation
• Unit test
• Docs

Implements feature request made in #19.

• Implementation
• Unit test
• Docs

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.

sorry if this is alreay covered but could not find way to change style for selected node and reset for unselected node.

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.

• Implementation
• Unit test
• Docs

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.

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.

• Implementation
• Unit test
• Docs

• Implementation
• Unit test
• Docs (unchanged)

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.

• Implementation
• Unit test
• Docs

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

• Implementation
• Unit test
• Docs

I want to render the node attributes as a card like below:

Is there any one can help?

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.

• Implementation
• Unit test
• Docs

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>,
  },
}

• Implementation
• Unit test
• Docs

• Implementation
• Unit test
• Docs

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

• Implementation
• Unit test
• Docs

• Implementation
• Unit test
• Docs

Rebind Tree via bindZoomListener if translate prop changed in order to prevent tree jumping on zoom/pan.

• Implementation
• Unit test
• Docs

• Implementation
• Unit test
• Docs

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.

• Implementation
• Unit test
• Docs

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}}} />

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?

• Implementation
• Unit test
• Docs

There is a bug with the initialDepth prop. The nodes are displaying without the links, beyond the initial depth.

<Tree data={myTreeData} initialDepth={2} /> is rendering

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

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.

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.

• Implementation
• Unit test
• Docs

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