鏈接D3力佈局網絡表圖上的鼠標懸停

Question

我參加了一個分子的邁克爾·博斯托克的強制網絡例如，http://bl.ocks.org/mbostock/3037015

我按照http://www.d3noob.org/2013/02/add-html-table-to-your-d3js-graph.html的例子中添加的數據表。

我將單獨的鼠標懸停事件添加到網絡和表中。如果我將鼠標懸停在圖中的某個節點上，選定的節點將以橙色突出顯示。

 var node = svg.selectAll(".node") 
      .data(graph.nodes) 
      .enter().append("g") 
      .attr("class", "node") 

      .on("mouseover", function() { 
       d3.select(this).select("circle").style("stroke-width", 6 ); 
       d3.select(this).select("circle").style("stroke", "orange"); 
       d3.select(this).select("text").style("font", "20px sans-serif"); 
       }) 
      .on("mouseout", function() { 
       d3.select(this).select("circle").style("stroke-width", 1.5); 
       d3.select(this).select("circle").style("stroke", "gray" ); 
       d3.select(this).select("text").style("font", "12px sans-serif"); 
       }) 
      .call(force.drag) 
      ; 

如果我將鼠標懸停在表格中的一行上，所選行將以橙色突出顯示。

  var rows = tbody.selectAll("tr") 
       .data(data) 
       .enter().append("tr") 
       .on('mouseover', function(){d3.select(this).style('background-color', 'orange');}) 
       .on('mouseout', function(){d3.select(this).style('background-color', 'white');}) 
       ; 

我想鏈接圖的鼠標懸停高亮與表，使得：

• 如果我將鼠標放在圖中，所選擇的節點，並在其相應的排中的一個節點表格都突出顯示。

• 如果我將鼠標懸停在表格中的某一行上，圖表中選定的行及其對應的節點都會突出顯示。

我一直沒有找到D3中的mouseover-linked圖和表的例子。你能指給我一個嗎？或建議一個解決方案？

我使用D3（d3.v3.js）和數據（graph.json）的本地副本並查看Firefox 20.0.1 for Windows上的圖表。

感謝您的幫助。

Answer 1

一個簡單的方法是使用dom元素類，選擇和鼠標事件所具有的數據對象。看看工作演示here

的相關部分：

我鏈接矩形基於圈子的成員在他們兩個各自數據集「類」和「貓」之間的連接。要獲取的元素很快我將把這些物品放入類屬性：

var table = svg.selectAll('rect').data(data).enter().append('rect'); 
table.attr(...) 
    .attr('class', function(d) { return d["class"];}); 

您可以將一個類的任何元素，你也可以附加多個類，每個元素（它被認爲是一個節省空間分隔列表）

我對每個圓都做同樣的事情。現在在圈內鼠標懸停我補充一下：

balls.on("mouseover", function(d) { 
    d3.select(this).attr("fill","#ffeeee"); 
    d3.selectAll("rect." + d.cat) 
     .attr('stroke','red') 
     .attr('stroke-width', 3); 
}) 

D3經過鼠標懸停元素的數據對象，所以我抓住它是「貓」，並使用與矩形的一個D3選擇與該類。像jQuery「rect.A」將選擇類「A」的所有「rect」元素

對於不同的方法， 。