在多线图表中,我在鼠标悬停时成功突出显示一条线,并使图例中的相应条目显示为粗体和更大。我也想淡化传说中的其他名字,以进一步增加对比度。如何选择不在我的鼠标悬停选择中的名称?
以下是我的鼠标悬停事件的摘录:
.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
答案 0 :(得分:1)
D3使用css3选择器,所以你要找的是负css选择器。原来那些存在。 Negative CSS selectors
尝试这样的事情
d3.selectAll(':not('+getname+')') // Fade the non-selected names in the legend
.style("opacity",.2);