0

In a multi line chart I successfully highlight a line when I mouseover, as well as make the corresponding entry in a legend appear bold and larger. I also want to fade the other names in the legend to further increase contrast. How do I make a selection of the names NOT in my selection for the mouseover?

Here is an excerpt of my mouseover event:

.on("mouseover", function (d) {                                  
   d3.select(this)                  
      .style("stroke-width",'6px'); // Make the line thicker on mouseover.
   var getname = document.getElementById(d.name);  // Line name to highlight in legend

// How to get the list of names NOT selected??
//var notsel = ??? (not(getname) ??  
    d3.selectAll(notsel)  // Fade the non-selected names in the legend
      .style("opacity",.2);

//This class highlights the selected name by CSS (not shown)
d3.select(getname)
  .attr("class", "legend-select");  //Change class to highlight name
tux3
  • 7,171
  • 6
  • 39
  • 51
Tim
  • 929
  • 12
  • 30

1 Answers1

1

D3 uses css3 selectors, so what you're looking for is a negative css selector. Turns out those exist. Negative CSS selectors

Try something like this

d3.selectAll(':not('+getname+')')  // Fade the non-selected names in the legend
  .style("opacity",.2);
Community
  • 1
  • 1
Scott Vickers
  • 601
  • 4
  • 10