zoomable treemap很棒,但我认为有一个功能可以让它变得更加强大。当将鼠标悬停在矩形周围时(无论是缩放之前还是之后),没有简单的方法可以知道矩形在层次结构中的位置及其大小。
我是 D3 的新手,但我想知道需要进行哪些更改才能使悬停工具提示(如下所示)正常工作。这是一个相对容易的修复,还是需要对源代码进行很大的更改才能实现它?我可以从哪里开始?
最佳答案
当单元格进入时,您可以在单击缩放功能之后注册另一个事件处理程序。在您链接的示例中,相关代码为:
var cell = svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
为此,您可以添加另一个用于鼠标悬停的处理程序,并在该函数中,沿着树向上走,记录每个父节点的名称,直到没有更多的父节点,然后将列表写入弹出窗口。为了这个示例,我们假设您设置了工具提示,如图所示,并为其指定了 tooltip
id。
然后你可以使用这样的处理程序:
.on('mouseover', function(d) {
// this variable will be used in a loop to store the current node being inspected
var currentNode = d;
// this array will hold the names of each subsequent parent node
var nameList = [currentNode.name];
// as long as the current node has a parent...
while (typeof currentNode.parent === 'object') {
// go up a level in the hierarchy
currentNode = currentNode.parent;
// add the name to the beginning of the list
nameList.unshift(currentNode.name);
}
// now nameList should look like ['flare','animate','interpolate']
// join the array with slashes (as you have in your example)
nameList = nameList.join('/');
// now nameList should look like 'flare/animate/interpolate'
// use this to set the tooltip text
$('#tooltip').text('Mouse hovering ' + nameList + '. Cell size = ' + d.area);
}
关于javascript - 可缩放树状图,底部带有工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23419101/