將鼠標懸停在影響其他圖表的圖表上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

回答

相關問題