Custom components for each label

[onlyreddy]

Hi there :),

Is there any possibility of rendering custom components to each label of a node?

I know I can do with viewGenerator for creating custom components to each node. Then I can apply few styles like position: relative to a parent div and for the popover position: absolute. With bottom style property, I can apply the value also but I can't predict the content of my custom label. So it may overlap on the node also but I don't want it.

Can any help me to implement this?

Please refer to the below image.

Thanks.

[danielcaldas]

So our viewGenerator as you've correctly pointed out allows you to define your own component (label inclusive of course, since it can be literally whatever you want). Now what you asking, and the context of your request makes total sense to me:

can't predict the content of my custom label. So it may overlap on the node also but I don't want it.

In order to offer more granular control without losing the positioning offered by react-d3-graph internally, it would make sense to expose a custom renderer prop for labels. I don't think this is hard to implement, it can be easily achieved in a retro-compatible manner as well. It can live side by side with node.labelProperty.

const node = {
  id: '1',
  labelViewGenerator: () => <div className="custom-label-style">Label <i>value</i></div>,

PRs as welcome 🙂