Question

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

这是徘徊在切片上。

Answer 1

使用d3构建表，然后将mouseover和mouseout事件绑定到<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。

Answer 2

对于未来的观众，

@Mark答案是一个正确的解决方案，但我遇到了一些问题，在Chrome和IE中翻译svg有关此问题： d3 Workaround for svg transform in chrome

在马克的小提琴后第44行添加翻译，就像是： .attr（“transform”，“translate（”+ chartWidth / 2 +“，”+ chartHeight / 2 +“）”）

并从第31行中删除以转换元素而不是整个元素然后将var svg变量调整为g，它应该在Chrome中有效。 IE是一个不同的故事

d3将鼠标悬停在表格上时的动画图表

2 个答案: