我采用了 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 上查看图表。
感谢您的帮助。
最佳答案
一个简单的方法是使用 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其着陆页有一个很好的完整示例。
关于d3.js - 将 D3 强制布局网络图与鼠标悬停时的表格链接起来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16308717/