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将鼠标悬停在桌面上时的动画图表

回答

相关问题