d3.js - 将 D3 强制布局网络图与鼠标悬停时的表格链接起来

Question

我采用了 Michael Bostock 的强制网络分子示例，http://bl.ocks.org/mbostock/3037015

我按照 http://www.d3noob.org/2013/02/add-html-table-to-your-d3js-graph.html 中的示例添加了一个数据表.

我向网络和表格添加了单独的鼠标悬停事件。如果我将鼠标悬停在图中的一个节点上，所选节点将以橙色突出显示。

        var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("g")
            .attr("class", "node")

            .on("mouseover", function() { 
                d3.select(this).select("circle").style("stroke-width", 6  ); 
                d3.select(this).select("circle").style("stroke", "orange"); 
                d3.select(this).select("text").style("font", "20px sans-serif");
                })
            .on("mouseout",  function() { 
                d3.select(this).select("circle").style("stroke-width", 1.5); 
                d3.select(this).select("circle").style("stroke", "gray"  ); 
                d3.select(this).select("text").style("font", "12px sans-serif");
                })
            .call(force.drag)
            ;

如果我将鼠标悬停在表格中的一行上，所选行会以橙色突出显示。

            var rows = tbody.selectAll("tr")
                .data(data)
                .enter().append("tr")
                .on('mouseover', function(){d3.select(this).style('background-color', 'orange');})
                .on('mouseout',  function(){d3.select(this).style('background-color', 'white');})
                ;

我想链接图表和表格的鼠标悬停突出显示:

• 如果我将鼠标悬停在图中的一个节点上，所选节点及其在表格中的对应行都会突出显示。

• 如果我将鼠标悬停在表格中的一行上，所选行及其在图表中的对应节点都会突出显示。

我无法在 D3 中找到鼠标悬停链接图表和表格的示例。你能给我指一个吗？或者提出解决方案？

我正在使用 D3 (d3.v3.js) 和数据 (graph.json) 的本地副本，并在适用于 Windows 的 Firefox 20.0.1 上查看图表。

感谢您的帮助。

Answer 1

一个简单的方法是使用 dom 元素类、选择和鼠标事件将具有的数据对象。查看工作演示 here

相关部分:

我根据“类”和“猫”在它们各自的两个数据集中的连接将矩形链接到圆圈。为了快速获取元素，我会将这些项目合并到类属性中:

var table = svg.selectAll('rect').data(data).enter().append('rect');
table.attr(...)
     .attr('class', function(d) { return d["class"];} );

您可以将一个类附加到任何元素，也可以将多个类附加到每个元素(它被认为是一个以空格分隔的列表)

我对每个圈子都做同样的事情。现在在圆圈鼠标悬停我添加:

balls.on("mouseover", function(d) { 
    d3.select(this).attr("fill","#ffeeee");
    d3.selectAll("rect." + d.cat)
        .attr('stroke','red')
        .attr('stroke-width', 3);  
})

D3 传递鼠标悬停元素的数据对象，所以我捕获它的“猫”并将其与具有该类的矩形上的 D3 选择器一起使用。像 jQuery 一样，“rect.A”将选择所有具有类“A”的“rect”元素

对于使用画笔和选择范围多于元素的不同方法，您还可以查看 crossfilter其着陆页有一个很好的完整示例。