Sketch the node to fit its node content
tramanh0105 opened this issue · comments
Hi,
so i was trying to make the rectangle container to sketch with the content it contains. I read that you can customize your node by overriding the renderNode method. Howerver it was unclear for me how to make the nodes to sketch and fit the content since you have to give the width and height of your symbol by passing the values to viewBox, which accept only number values.
I would appreciated if you can give me a code example on how it could be done.
By the ways it is a cool library thank you so much.
There's no great way to dynamically adjust a rectangle to the text, and SVG doesn't really support text wrapping. The StackOverflow answer below can help a bit, but you will still need Javascript to calculate the estimated height.
A suggestion for this example, your renderNode function should be able to know which properties will be displayed in the text. It knows that the node data contains name, telefon, email, marke, modell, and datum, or just marke and modell, so it can make the node height dynamic based on the title+margin+(N*visible fields).
Thank for the quick reply, I'll give it a try. Not relevant to this topic but i wonder if there is a way to make each attributes from these classes behave like a child node from the classes, so that i can create edges between attributes from classes.
For an example i would like to be able to connect Name from class Person to Name from class Vertrag. I found the NodeSubtypes in the documentation but couldn't find any example for that.
At the moment there are no "anchor points" in react-digraph. It only creates edges from the center of the node and then performs a calculation to move the baseline of the edge to the outside. We have been planning to implement an edge-anchor feature for some time but I haven't had the chance to get to it.
Please feel free to create a feature request that describes how you would like the anchor points to work, such as the ability to customize the locations, otherwise we will create some number of anchors and distribute them evenly around the node without considering the layout.