Overlapping text for links

GoJS
1

Hi,

I’d like to know what the best way to avoid overlapping text for links is.
I have 2 nodes, Bob and Alice, and two links between them. Let’s say that Alice writes to Bob, but Bob calls Alice.

    var nodeDataArray = [{"id":1,"name":"Bob"},
<span ="Apple-tab-span" style="white-space:pre">						</span>{"id":2,"name":"Alice"}];
    var linkDataArray = [{ from: 2, to: 1, text: "writes", category: "test" }, 
<span ="Apple-tab-span" style="white-space:pre">						</span> { from: 1, to: 2, text: "calls", category: "test" }];

When I try to use a ForceDirectedLayout to graph this, the text on the links, “writes”, and “calls” are too close to one another and overlap making it hard to see the actual word.

How can I avoid overlapping/ensure proper spacing for the link labels/text? Is there a way to dynamically position/offset text blocks depending on positioning of other elements? I would like both labels to be clearly visible, to allow for the possibility of two different links (in two different directions) between nodes, but the text overlapping is a problem. I suppose I could try tool tips, but I figured I’d ask for some advice.

Any comments or suggestions are greatly appreciated.
Thanks,
Boki

2

There isn’t a general solution for this. But for this kind of case, it’s easy to set segmentFraction: 0.5 on the label in your Link template.