d3将鼠标悬停在表格上时，制作图表动画

d3 Animate chart when hovering over a table

本文关键字：动画 鼠标 悬停 表格 d3      更新时间：2023-09-26

我是d3的新手，所以请对我宽容一点。

我终于有了一张甜甜圈图。当我将鼠标悬停在甜甜圈图的切片上时，它们会成功分离，并以我想要的方式显示。我在页面中添加了一个新表，表中的数据模仿了图表所表示的数据。我想知道是否有一种方法可以像我悬停在一个切片上时，当我悬停在它对应的表条目上时一样，对切片进行动画处理。

非常感谢您的帮助！！

p.S，如果有一种更简单的方法来填充表格，我想确实有，也可以随意分享这些信息！

这是小提琴链接！

$('#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);
            });

这是悬停在切片上。

用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; });

此处更新了fiddle。

对于未来的查看器，

@Mark答案是一个正确的解决方案，但我在Chrome和IE中翻译svg时遇到了一些问题：d3铬中svg变换的变通方法

在马克的小提琴第44行后面加一个译文，类似于：.attr（"transform"，"translate（"+chartWidth/2+"，"+chartHeight/2+"）"）

并从第31行移除以平移元素而不是整个然后将var svg变量调整为g，它应该可以在Chrome中工作。IE是另一回事

相关文章：