d3將鼠標懸停在桌面上時的動畫圖表

我對d3比較陌生，所以請對我輕鬆點。d3將鼠標懸停在桌面上時的動畫圖表

我終於得到了一個甜甜圈圖表工作。當我將鼠標懸停在圓環圖的切片上時，它們會成功分離，並以我想要的方式顯示。我在頁面上添加了一個新表格，表格中的數據模仿了圖表所代表的數據。我想知道是否有一種方法可以讓我們將鼠標懸停在相應的表格條目上時，按照與鼠標懸停時相同的方式進行動畫處理。

任何幫助非常感謝！

P.S，如果有一種更簡單的方式填充表格，我認爲它有，請隨時分享這些信息！

Here是小提琴鏈接！

$('#testtable tr').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
});

這是我如何懸停在表現在，

  .on("mouseover", function(d) { 
       d3.select(this).select("path").transition() 
        .duration(100) 
        .attr("d", arcOver); 
      }) 
      .on("mouseout",function(d){ 
       div.html(" ").style("display","none"); 
       d3.select(this).select("path").transition() 
        .duration(100) 
        .attr("d", arc); 
      });

，這是盤旋在切片。

來源

2015-02-05 Brian

用d3構建表格，然後將mouseover和mouseout事件綁定到<tr> s。另外，這裏不需要jQuery，讓d3處理這一切。

// column headers 
var keys = ["Date","Value","Rate","Type"]; 

// add the headers 
d3 
    .select("#testtable")  
    .append("tr") 
    .selectAll(".head") 
    .data(keys) 
    .enter() 
    .append("th") 
    .attr("class","head") 
    .text(function(d) { return d; });  

// add the rows 
d3 
    .select("#testtable") 
    .selectAll(".dataRow") 
    .data(data) 
    .enter() 
    .append("tr") 
    .attr("class","dataRow") 
    .on("mouseover", function(d,i) { 
     // make the row red 
     d3.select(this) 
      .style("background-color","red"); 
     // find your path and transition 
     var path = paths[0][i]; 
     d3.select(path).transition() 
        .duration(100) 
        .attr("d", arcOver); 
    }) 
    .on("mouseout",function(d,i){ 
     d3.select(this) 
      .style("background-color","transparent"); 
     var path = paths[0][i]; 
     d3.select(path).transition() 
     .duration(100) 
     .attr("d", arc); 
    }); 

// add table data 
d3.selectAll("#testtable .dataRow") 
    .selectAll("td") 
    .data(function(row) { 
     return keys.map(function(d) { 
      return {value: row[d]}; 
     }); 
    }) 
    .enter() 
    .append("td") 
    .html(function(d) { return d.value; });

更新的小提琴here。

來源

2015-02-05 23:30:17 Mark

這真棒！這工作完美。我試圖弄清楚如何現在做相反的工作，當在一個切片上盤旋時，表格會突出顯示。我認爲這只是將突出顯示添加到弧的mouseover事件中，但我試圖找出如何映射到表。有任何想法嗎？ – Brian 2015-02-06 18:31:39

嘿！看起來我正在學習一點點。我有選擇並突出顯示所有行，當我將鼠標懸停在圓弧上時，找出如何選擇正確的數據。 – Brian 2015-02-06 18:36:54

對於未來的觀衆，

@馬克的答案是正確的解決方案，但我遇到了一些問題，在翻譯Chrome和IE中的SVG關於這個問題： d3 Workaround for svg transform in chrome

在第44行後添加翻譯Mark的撥弄，是這樣的： .attr（「變換」，「翻譯（」 + chartWidth/2 + 「」 + chartHeight/2 + 「）」）

並從管線31取出到元件代替翻譯整個然後將var svg變量調整爲g，並且它應該在Chrome中工作。 IE是一個不同的故事

來源

2015-08-21 19:45:25 DDrake

d3將鼠標懸停在桌面上時的動畫圖表

回答

相關問題