javascript - 悬停在表格上时d3动画图表

我是d3的新手，所以请放轻松。

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

任何帮助是极大的赞赏!!

附注:如果我认为有一种更简单的方法来填充表格，也可以随时共享该信息!

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

这是悬而未决的。

最佳答案

使用d3构建表，然后将mouseover和mouseout事件绑定(bind)到<tr>。另外，这里不需要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。

关于javascript - 悬停在表格上时d3动画图表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28352417/