将鼠标悬停在影响其他图表的图表上d3.js

当我将鼠标悬停在第一个图表上的一个条上时，我的目标是能够影响第二个图表上的关联条（例如突出显示这些条）。

目标与here相似。但使用我现有的代码，只要将鼠标悬停在某个图表上的某个条上，就会突出显示两个图表中的所有条形图。

有没有人有解决这个问题？由于

这里是我的代码：

<!DOCTYPE html> 
<html> 

    <head> 
     <style> 
      #chart_01 { 
       height: 40px; 
       position: relative; 
       width: 360px; 
      } 
      #chart_02 { 
       height: 40px; 
       position: relative; 
       width: 360px; 
      } 


     </style> 
     <meta charset = "UTF-8"> 
     <script src = "https://d3js.org/d3.v3.min.js" charset = "utf-8"></script> 
    </head> 

    <body> 
     <div id = "chart_01"> 
      <h2>Chart 01</h2> 
      <script> 
       var source = [{ 
          x: 3, 
          y: 6 
         }, { 
          x: 8, 
          y: 40 
         }, { 
          x: 9, 
          y: 10 
         }]; 

       var canvas_01 = d3.select("body") 
        .append("svg") 
        .attr("width", 500) 
        .attr("height", 200) 

       canvas_01.selectAll(".sweetpoint") 
        .data(source) 
        .enter() 
         .append("rect") 
         .classed("sweetpoint", true) 
         .attr("width", function(data_){return data_.x * 40;}) 
         .attr("height", 10) 
         .attr("y", function(data_, index_){return index_ * 30;}) 
         .attr("fill", "#e4e4e4") 

         .on("mouseover", function(data_, index_){ 
          d3.selectAll(".sweetpoint").style("fill", "#696969"); 
         }) 
         .on("mousemove", function(data_, index_){ 
         }) 
         .on("mouseout", function(data_, index_){ 
          d3.selectAll(".sweetpoint").style("fill", "#e4e4e4"); 
         }) 
      </script> 
     </div> 

     <div id = "chart_02"> 
      <h2>Chart 02</h2> 
      <script> 

       var canvas_02 = d3.select("body") 
        .append("svg") 
        .attr("width", 500) 
        .attr("height", 200) 

       canvas_02.selectAll(".sweetpoint") 
        .data(source) 
        .enter() 
         .append("rect") 
         .classed("sweetpoint", true) 
         .attr("width", function(data_){return data_.x * 10;}) 
         .attr("height", 10) 
         .attr("y", function(data_, index_){return index_ * 30;}) 
         .attr("fill", "#e4e4e4") 

         .on("mouseover", function(data_, index_){ 
          d3.selectAll(".sweetpoint").style("fill", "#696969"); 
         }) 
         .on("mousemove", function(data_, index_){ 
         }) 
         .on("mouseout", function(data_, index_){ 
          d3.selectAll(".sweetpoint").style("fill", "#e4e4e4"); 
         }) 

      </script> 
     </div> 

    </body> 

</html>

来源

2017-10-17 Fxs7576

我改写了你的代码。它是你需要的行为吗？请注意0事件的处理函数。在这里，您应该为悬停的酒吧设置适当的样式，您可以使用d3.select(this)以及另一个图表上的关联酒吧获得相关酒吧，您可以使用悬停元素的索引获取该样式。

... 
.on("mouseover", function(data_, index_) { 
    d3.select(this).style("fill", "#696969"); 

    canvas_02 
    .selectAll('.sweetpoint') 
    .filter(function(d, i) { 
    return i === index_ 
    }) 
    .style("fill", "#696969"); 
}) 
...

var source = [{ 
 
    x: 3, 
 
    y: 6 
 
}, { 
 
    x: 8, 
 
    y: 40 
 
}, { 
 
    x: 9, 
 
    y: 10 
 
}]; 
 

 
var canvas_01 = d3.select("#chart_01") 
 
    .append("svg") 
 
    .attr("width", 500) 
 
    .attr("height", 200) 
 

 
canvas_01.selectAll(".sweetpoint") 
 
    .data(source) 
 
    .enter() 
 
    .append("rect") 
 
    .classed("sweetpoint", true) 
 
    .attr("width", function(data_) { 
 
    return data_.x * 40; 
 
    }) 
 
    .attr("height", 10) 
 
    .attr("y", function(data_, index_) { 
 
    return index_ * 30; 
 
    }) 
 
    .attr("fill", "#e4e4e4") 
 

 
.on("mouseover", function(data_, index_) { 
 
    d3.select(this).style("fill", "#696969"); 
 

 
    canvas_02 
 
     .selectAll('.sweetpoint') 
 
     .filter(function(d, i) { 
 
     return i === index_ 
 
     }) 
 
     .style("fill", "#696969"); 
 
    }) 
 
    .on("mousemove", function(data_, index_) {}) 
 
    .on("mouseout", function(data_, index_) { 
 
    d3.selectAll(".sweetpoint").style("fill", "#e4e4e4"); 
 
    }) 
 

 
var canvas_02 = d3.select("#chart_02") 
 
    .append("svg") 
 
    .attr("width", 500) 
 
    .attr("height", 200) 
 

 
canvas_02.selectAll(".sweetpoint") 
 
    .data(source) 
 
    .enter() 
 
    .append("rect") 
 
    .classed("sweetpoint", true) 
 
    .attr("width", function(data_) { 
 
    return data_.x * 10; 
 
    }) 
 
    .attr("height", 10) 
 
    .attr("y", function(data_, index_) { 
 
    return index_ * 30; 
 
    }) 
 
    .attr("fill", "#e4e4e4") 
 

 
.on("mouseover", function(data_, index_) { 
 
    d3.select(this).style("fill", "#696969"); 
 

 
    canvas_01 
 
     .selectAll('.sweetpoint') 
 
     .filter(function(d, i) { 
 
     return i === index_ 
 
     }) 
 
     .style("fill", "#696969"); 
 
    }) 
 
    .on("mousemove", function(data_, index_) {}) 
 
    .on("mouseout", function(data_, index_) { 
 
    d3.selectAll(".sweetpoint").style("fill", "#e4e4e4"); 
 
    })

#chart_01 { 
 
    height: 110px; 
 
    position: relative; 
 
    width: 360px; 
 
} 
 

 
#chart_02 { 
 
    height: 110px; 
 
    position: relative; 
 
    width: 360px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script> 
 
<div id="chart_01"> 
 
    <h2>Chart 01</h2> 
 
</div> 
 
<div id="chart_02"> 
 
    <h2>Chart 02</h2> 
 
</div>

来源

2017-10-17 13:38:02

它！谢谢米哈伊尔。 – Fxs7576

将鼠标悬停在影响其他图表的图表上d3.js

回答

相关问题