3

我拿了 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) 的本地副本，并在 Firefox 20.0.1 for Windows 上查看图表。

谢谢你的帮助。

4

1 回答 1

3

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

相关部分：

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

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，其登录页面有一个很好的完整示例。

于 2013-04-30T22:19:24.080 回答