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

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:

codeout / inet-henge