影響d3.js中多個單獨圖表的交互作用？

Question

我試圖在包含兩個圖表的d3.js中創建一個數據可視化：一個平行軸繪圖和水平色條圖（我剛剛創建了該名稱，但基本上是一系列彩色矩形）。平行軸圖中的每條線都與色條圖中的一組矩形相關聯。

現在，將鼠標懸停在給定的線條上突出顯示該線條，並將鼠標懸停在給定的矩形上突出顯示該組矩形。我的目標是在用戶將鼠標懸停在任一圖表上時，也可以在相反的圖表上突出顯示相關線條或一組矩形。這似乎是，如果我生成具有相同功能的兩個圖表，這將是非常簡單的。然而，爲每個圖表提供自己的功能並且以某種方式將它們連接起來，將會有更整潔（更可重用）的編碼風格。我嘗試讓每個圖內mouseover函數調用一個定義在影響兩個圖表的較高級別的函數，但是這對似乎沒有被掩蓋的圖表似乎沒有任何影響。由於我仍然不能完全理解d3.js如何在基礎層面上工作，所以我很想確認這是設置我的代碼的一種可行的方法。我的代碼是長期和複雜的，我真的只是想建議的結構，所以這裏的基本輪廓：

function chart1(){ 
    make chart 
    function mouseover(d,i){ 
     do stuff 
     chart1_globalmouseover(d,i); 
    } 
    chartElement.on("mouseover", function(d,i){mouseover(d,i)}); 
} 

function chart2(){ 
    make chart 
    function mouseover(d,i){ 
     do stuff 
     chart2_globalmouseover(d,i); 
    } 
    chartElement.on("mouseover", function(d,i){mouseover(d,i)}); 
} 

function chart1_globalmouseover(d,i){ 
    do stuff in chart 2's mouseover function 
} 

function chart2_globalmouseover(d,i){ 
    do stuff in chart 1's mouseover function 
} 

c1 = chart1(); 
c2 = chart2(); 

Answer 1

一到兩個圖獨立的代碼來創建它們將分配連接方式您可能想要選擇的元素的ID或類。也就是說，如果圖2具有ID爲foo的元素，則在圖1的元素的鼠標處理程序中，例如，可以說d3.select("#foo").style("stroke", "red")。與類相似。

該方法允許您保持代碼完全分離。此外，如果您使用類，則可以將相同的類分配給您想要一起突出顯示的內容（例如表示相同數據的元素）。然後d3.selectAll(".class")會選擇並允許你操縱它們。這可以適用於任意數量的圖形，而不僅僅是兩個 - 只是將要選擇的元素數量發生了什麼變化。