Request for some changes to label and links so that the visibility of the dense graphs can be improved

[bharath-ravindranath]

@codeout , if possible, can you please help me with implementing the following:

• [x] 1. When hovering over a link, increase the size of the label (interface)
• [x] 2. When hovering over a link, bring the label to the foreground (so that links are not on top of them)
• [ ] 3. When hovering over a link, make a filled background for the label (if there are any links going under that label, it will not mess up the view)
• [x] 4. hover over label (I tried .path-label:hover and others, but did not work)
• [x] 5. If we can make all other labels invisible(except the one attached to the link/label) when hovering over a particular link (maybe a little farfetched??)

[codeout]

I'd think that I'm almost done implementing your requests. Please see my demo at http://inet-henge.herokuapp.com/issue09.html

inet-henge implemented here is the new version that hasn't been released yet. I will publish it soon after I write some documents as it breaks backward compatibilities.

Anyway, you can use inet-henge as below once the new version is released.

1. When hovering over a link, increase the size of the label (interface)

You don't need anything special, just use CSS.

/* default text size */
.link text {
    font-size: 5px;
}

/* hovered text size */
.link text.hover tspan {
    font-size: 7px;
}

2. When hovering over a link, bring the label to the foreground (so that links are not on top of them)

In the new version, this is the default behavior.

3. When hovering over a link, make a filled background for the label (if there are any links going under that label, it will not mess up the view)

It's very complicated as SVG specification doesn't have a "background" attribute so we have to add extra rectangles as backgrounds behind link labels and move them to follow foreground labels. This requires big changes in inet-henge's internal, but it's difficult so far.

4. hover over label (I tried .path-label:hover and others, but did not work)

Should work in the new version.

5. If we can make all other labels invisible(except the one attached to the link/label) when hovering over a particular link (maybe a little farfetched??)

You can do this by adding some js code just before diagram.init() like below:

  diagram.on('rendered', () => {
    d3.selectAll('line').on('mouseover', function (d) {
      // Hide all labels
      d3.selectAll('.link text').style('visibility', 'hidden');

      // Show hovered labels
      d3.selectAll(`.link text.${d.path_id()}`).style('visibility', 'visible');
    }).on('mouseout', function (d) {
      if (currentScale() > 1.5) {
        // Show all labels
        d3.selectAll('.link text').style('visibility', 'visible');
      } else {
        // Hide hovered labels
        d3.selectAll(`.link text.${d.path_id()}`).style('visibility', 'hidden');
      }
    });

    // You can also change label position, which is, how far it is from the node along the link line
    d3.selectAll('.link textPath tspan').attr('x', '40');
    d3.selectAll('.link textPath.reverse tspan').attr('x', '-40');
  });

  function currentScale() {
    return d3.transform(diagram.svg.attr('transform')).scale[0];
  }

You can find full source code here:

• http://inet-henge.herokuapp.com/issue09.html
• http://inet-henge.herokuapp.com/css/issue09.css