0

So I managed to solve my hiding unselected groups issue:

Hide all but selected connected nodes in D3 (v4) force graph

But I now have another problem:

Opening the following Plunker in Chrome gives incorrect behaviour: http://plnkr.co/edit/TiKKmvydqXNipe103juL?p=preview

When a link is clicked on it hides all of the nodes & text, not just the unselected ones, leaving only the selected links visible.

I really don't understand this, the lines of code that deal with the show/hide are based on the IDs 'group' and 'nodeGroup':

  .attr("group",function(d) {return d.group; })
  .on("click", function(d) {
        // This is to toggle visibility - need to do it on the nodes and links
        d3.selectAll("line:not([group='"+d.group+"'])")
        .style("opacity", function() {
            currentDisplay = d3.select(this).style("opacity");
            currentDisplay = currentDisplay == "1" ? "0.1" : "1";
            return currentDisplay;
        });
        d3.selectAll("circle:not([nodeGroup='"+d.group+"'])")
        .style("opacity",function() {
            currentDisplay = d3.select(this).style("opacity");
            currentDisplay = currentDisplay == "1" ? "0.1" : "1";
            return currentDisplay;
        });
        d3.selectAll("text:not([nodeGroup='"+d.group+"'])")
        .style("opacity",function() {
            currentDisplay = d3.select(this).style("opacity");
            currentDisplay = currentDisplay == "1" ? "0.1" : "1";
            return currentDisplay;
        });
})

If I step through this in the Chrome debugger then it appears to get called and run correctly, but then it looks like "circle" and "text" being included in the selection for hiding and not excluded as per the :not pseudo-class. (using onclick("mousedown".... makes no difference, nor does altering the order)

I have look around and can only find issues people have had with Chrome not interpreting pseudo-classes in the same way as IE, but this can't be the same problem as it half-works?

Any clues would be greatly appreciated.

AEngineer
  • 152
  • 3
  • 12
  • It appears to work fine in chrome to me. At least it toggles the opacity of the links, nodes and text that are not in the group of the link being clicked on. Leaving the links and nodegroup of the ones clicked on the same and changing the rest. This seems a bit weird to me, as if you click on a hidden link, it remains hidden, while the other 2 change, but obviously you probably want it to work that way... – Oliver Houston Jun 15 '17 at 12:03
  • Thanks again Oliver, I've replied to my own post, it did seem to be a problem, I think I'd fixed and saved it in Plunker before you tried it. In production I am fading the non-selected parts to 0 so the option of clicking on them is not there as this is not compatible with the logic. – AEngineer Jun 15 '17 at 12:16
  • No worries, I'm newish to d3, so like looking at examples to steal... I mean, learn, yeah learn from. I realise that most people wouldn't click on a faded link, but I did by accident and thought the behaviour might seem strange. – Oliver Houston Jun 15 '17 at 13:10

1 Answers1

0

OK seem to have fixed this, didn't really get to the bottom of it, I just renamed some of the variables so that 'group' wasn't being used for colour for the nodes and grouping for the links. Not sure why the behaviour was different. I have updated my plunker accordingly.

AEngineer
  • 152
  • 3
  • 12