合并D3中的多个事件

Question

我创建了此示例图表。 线条和图例是交互式的：当鼠标悬停在图形上的线（或文本或图例的圆）上时，相应的线将变为不透明1。此外，单击图例中的项目（文本或圆圈），相应的线被隐藏。

这两个事件分别工作，但不一起工作。 当我禁用一条线，然后在图例上（立即）或在该行上用鼠标移过时，由于更改了不透明度的事件，它以不透明度1显示。

这是一段代码：

dataNest.forEach(function(d, i) {

        d.values = d.values.sort(function(a, b) { return a.year -b.year; }); 

        // create line 
        svg.append("path")
            .classed("line", 'true')
            .classed('tag' + d.key.replace(/\s+/g, ''), true) 
            .style("stroke", color(i))                          
            .style("opacity", 0.5)
            .attr("d", valueline(d.values))
            .on("mouseover", function() {
                d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
                    .style("opacity", 1);
            })
            .on("mouseout", function() {
                d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
                    .style("opacity", 0.5);
            });     

        svg.append("text")
            .attr("x", width + 58)  
            .attr("y", i * 28 + 4)          
            .attr("class", "legend")
            .style("fill", color(i))                                
            .text(d.key)                                    
            .on("click", function() {                           
                var active = d.active ? false : true;           
                var newOpacity = active ? 0 : 0.5;
                var newColorFill = active ? "white" : color(i); 
                d3.selectAll(".tag" + d.key.replace(/\s+/g, ''))    
                    .transition().duration(150)   
                    .style("opacity", newOpacity);  
                d3.selectAll(".circle" + d.key.replace(/\s+/g, ''))         
                    .transition().duration(150)   
                    .style("fill", newColorFill); 
                d.active = active;                                  
            })
            .on("mouseover", function() {
                d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
                    .style("opacity", 1);
            })
            .on("mouseout", function() {
                d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
                    .style("opacity", 0.5);
            });

        svg.append("circle")
            .classed("circle", 'true')
            .classed('circle' + d.key.replace(/\s+/g, ''), true) 
            .attr("cx", width + 40) 
            .attr("cy", i * 28)                                      
            .attr("r", 10)                          
            .attr("stroke", color(i))
            .attr("stroke-width", 3)
            .style("fill", color(i))                    
            .on("click", function() {                   
                var active = d.active ? false : true;           
                var newOpacity = active ? 0 : 0.5; 
                var newColorFill = active ? "white" : color(i);
                d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
                    .transition().duration(150)   
                    .style("opacity", newOpacity); 
                d3.selectAll(".circle" + d.key.replace(/\s+/g, ''))     
                    .transition().duration(150)   
                    .style("fill", newColorFill); 
                d.active = active;                                      
            })
            .on("mouseover", function() { 
                d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
                    .style("opacity", 1);
            })
            .on("mouseout", function() {
                d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
                    .style("opacity", 0.5);
            });
...
}

整个代码在这里： https : //plnkr.co/edit/RRw9f6kk4nataJL2OQfQ?p=preview

我也尝试过在外部使用active变量，即这样做：

dataNest.forEach(function(d, i) {

d.values = d.values.sort(function(a, b) { return a.year -b.year; }); 

var active = d.active ? false : true;   

// create line 
svg.append("path")
    .classed("line", 'true')
    .classed('tag' + d.key.replace(/\s+/g, ''), true) 
    .style("stroke", color(i))                          
    .style("opacity", 0.5)
    .attr("d", valueline(d.values))
    .on("mouseover", function() {
        d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
            .style("opacity", 1);
    })
    .on("mouseout", function() {
        d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
            .style("opacity", 0.5);
    });     

svg.append("text")
    .attr("x", width + 58)  
    .attr("y", i * 28 + 4)          
    .attr("class", "legend")
    .style("fill", color(i))                                
    .text(d.key)                                    
    .on("click", function() {                           
        //var active = d.active ? false : true;         
        var newOpacity = active ? 0 : 0.5;
        var newColorFill = active ? "white" : color(i); 
        d3.selectAll(".tag" + d.key.replace(/\s+/g, ''))    
            .transition().duration(150)   
            .style("opacity", newOpacity);  
        d3.selectAll(".circle" + d.key.replace(/\s+/g, ''))         
            .transition().duration(150)   
            .style("fill", newColorFill); 
        d.active = active;                                  
    })
    .on("mouseover", function() {
        if(active)
          d3.selectAll(".tag" + d.key.replace(/\s+/g, '')).style("opacity", 1);
    })
    .on("mouseout", function() {
      if(active)
          d3.selectAll(".tag" + d.key.replace(/\s+/g, '')).style("opacity", 0.5);
    });

svg.append("circle")
    .classed("circle", 'true')
    .classed('circle' + d.key.replace(/\s+/g, ''), true) 
    .attr("cx", width + 40) 
    .attr("cy", i * 28)                                      
    .attr("r", 10)                          
    .attr("stroke", color(i))
    .attr("stroke-width", 3)
    .style("fill", color(i))                    
    .on("click", function() {                   
        var active = d.active ? false : true;           
        var newOpacity = active ? 0 : 0.5; 
        var newColorFill = active ? "white" : color(i);
        d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
            .transition().duration(150)   
            .style("opacity", newOpacity); 
        d3.selectAll(".circle" + d.key.replace(/\s+/g, ''))     
            .transition().duration(150)   
            .style("fill", newColorFill); 
        d.active = active;                                      
    })
    .on("mouseover", function() { 
      if(active)
          d3.selectAll(".tag" + d.key.replace(/\s+/g, '')).style("opacity", 1);
    })
    .on("mouseout", function() {
      if(active)
          d3.selectAll(".tag" + d.key.replace(/\s+/g, '')).style("opacity", 0.5);
    });

    ...

}); // end dataNest.forEach

但这不起作用，为什么呢？

我知道代码有点（实际上非​​常）混乱，但是我刚开始使用d3，所以我还不了解如何组织代码。

谢谢

Answer 1

好的，实际上您已经完成了所有工作，但忘记进行if检查。

结果如下： https : //plnkr.co/edit/EakWo8xD4WDkWa7o59bd?p=preview

我刚刚添加

if(!d.active){
                d3.selectAll(".tag" + d.key.replace(/\s+/g, '')) 
                    .style("opacity", 1);}

是否有一行鼠标事件来检查您的数据是否处于活动状态。