Separate label styles for root and children.

[alex0112]

Are you reporting a bug, or opening a feature request?

Feature request

What is the actual behavior/output?

Root node labels are styled/positioned the same as all other labels.

What is the behavior/output you expect?

I would like it if I could provide separate styling in for the root of the tree and the child nodes. (Specifically on the label positioning)

I would like to avoid this:

See how the label for the root gets wiped out by the branches?

What version of react-d3-tree are you using?

1.11.0

Totally willing to work on the PR once school gets a little less crazy for me.

[wildemat]

bump

[wildemat]

i've been experimenting a bit.
In my styles object:

styles={{
     nodes: {
          node: {
                name: {
                     transform: 'translate(0 -30)',
                     textAnchor: 'end'
                }
          }                  
      }
}}

this should work for your use case. But it doesn't.
x, y, and transform don't work for me when styling the node. But textAnchor does work. So are x, y, and transform always overridden by textLayout?

Edit
I don't think that's the right assumption. Other transform properties work. like scaleX. But not translate. I think just the x and y can't be manipulated from what textLayout defines
https://github.com/bkrem/react-d3-tree/blob/master/src/Node/index.js#L115

[wildemat]

I got something working, it's trash though, this should be fixed in the package.

Use the foreignObjectWrapper.
Passing x and y to that wrapper still applies to all nodes. so i assign a class within my foreign object depending on if the node has children or not.

class NodeLabel extends React.PureComponent {
    render() {
      let {className, nodeData} = this.props
      className = nodeData._children ? className + '-node' : className + '-leaf';
      return (
        <div className={className}>
          <h2>{nodeData.name}</h2>
        </div>
      )
    }
}

and the class defines margin-top to be something like -100px or whatever you need.

Update

Hi it's me again. I stumbled upon https://stackoverflow.com/questions/32855077/react-get-bound-parent-dom-element-name-within-component

and managed to get it working in that way:

class NodeLabel extends React.PureComponent {
    componentDidMount(){
        if (this.props.nodeData._children) {
            ReactDOM.findDOMNode(this).parentNode.setAttribute('y',-100);
        }
    }
...

so yeah another hijacking sort of thing, but at least this manipulates the original foreignObject attribute instead of adding some wonky css classes.

[wildemat]

In my case, I needed to reposition the text horizontally, based on text length.
The foreignObject wrapper element gave a width that was smaller than the actual text.

I used this as a start: https://stackoverflow.com/questions/29031659/calculate-width-of-text-before-drawing-the-text

class NodeLabel extends React.PureComponent {
    onMouseOver(){
        console.log('moused over');
    }
    componentDidMount(){
        if (this.props.nodeData._children) {
            let context = this.props.canvasContext;
            context.font = '20px Courier'
            //add on the radius of the node circle
            let canvasWidth = context.measureText(this.refs.nodeName.textContent).width + 15;
            // change x based on text length
            // because foreignObject has it's width set auto
            // can't attach a ref to the parent object, because it is generated by the 
            // foreignObjectWrapper
            ReactDOM.findDOMNode(this).parentNode.setAttribute('x',-canvasWidth);
            ReactDOM.findDOMNode(this).parentNode.setAttribute('y',-40);
        }
    }
    render() {
      let {className, nodeData} = this.props
      return (
        <div className={className} onMouseOver={this.onMouseOver}>
          <h4 ref="nodeName">{nodeData.name}</h4>
        </div>
      )
    }
}

PM me if you want to see exactly how i'm using this.props.canvasContext and how i get it to work. But it looks great now.

[wildemat]

I figure I might as well keep spamming this thread with my findings if nobody gives a rebuttal. Sorry for taking over your question, it was dying anyway.

I think this is a better solution than using the canvas. Referencing:
https://stackoverflow.com/questions/18713716/html5-canvas-why-does-measuring-text-with-measuretext-and-offsetwidth-give-di
and
https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript

I make a single div element above my tree. I will use it later to inject text and measure the width.
I pass a method to the Tree that will get the actual div element from my parent App.js.

in the componentDidMount method for my NodeLabels, I get the node name, put it in the hidden div, get the div width, and set the x attribute of the foreignObject accordingly. Works great.

[bkrem]

Hi @alex0112 & @mwilde345,

Apologies for the wait until I gave my 2 cents on this, I've been travelling for work the past 10+ days and was trying to address issues on the repo that I could resolve in the limited time I had.

First of all, very impressive workarounds @mwilde345, thank you for your efforts in providing a way for people to get this done 💯

I completely agree that this is problematic in terms of UX, so my suggestion would be the following:

• Extend Tree's API with a leafTextLayout property (this allows us to extend the v1 API without breaking changes)
• In v2, properly separate styling for full nodes and leaf nodes

Let me know if you have comments regarding this. If not, I will move forward with implementing leafTextLayout as soon as I have the time.

You're also welcome to take this on yourself if you want it done as soon as possible, in which case I'll mark this issue as WIP: Contributor.