【问题标题】:D3.js : Select the NOT selected to fade them (line chart, line chart legend)D3.js :选择未选中的以淡化它们(折线图,折线图图例)
【发布时间】:2015-06-24 20:40:31
【问题描述】:

在多折线图中,当我将鼠标悬停时,我成功地突出了一条线,并使图例中的相应条目显示为粗体和更大。我还想淡化图例中的其他名称以进一步增加对比度。如何选择不在我的鼠标悬停选择中的名称?

这是我的鼠标悬停事件的摘录:

.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

【问题讨论】:

    标签: d3.js


    【解决方案1】:

    D3 使用 css3 选择器,因此您正在寻找的是一个负 css 选择器。原来那些存在。 Negative CSS selectors

    试试这样的

    d3.selectAll(':not('+getname+')')  // Fade the non-selected names in the legend
      .style("opacity",.2);
    

    【讨论】:

    • 不知道,很有用:))
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-10-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-09-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多