Question

我采用了迈克尔·博斯托克的强制网络分子示例http://bl.ocks.org/mbostock/3037015

enter image description here

我在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上查看图表。

感谢您的帮助。

Answer 1

执行此操作的一种简单方法是使用dom元素类，选择以及鼠标事件将具有的数据对象。看看工作演示here

相关部分：

我基于两个相应数据集中“class”和“cat”之间的连接将矩形链接到圆圈。为了快速获得元素，我将这些项目合并到类属性中：

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传递了moused-over元素的数据对象，因此我抓住了它的“cat”并使用带有该类的rect选择器上的D3选择器。像jQuery“rect.A”将选择所有“rect”元素与类“A”

对于使用画笔并选择范围而不是元素的其他方法，您还可以查看其着陆页有完整示例的crossfilter。

链接D3强制布局网络图与鼠标悬停表

1 个答案: