相关疑难解决方法(0)

我使用D3创建了一个力导向图,并在正常div中显示了节点的id.我需要突出显示在div中单击了id的节点.我搜索了节点的id并使用普通的javascript尝试点击它但它不起作用.

我在此示例后面的d3.js中实现了HTML工具提示,使用如下代码:

function onmouseover(d) {
    $("#tooltip").fadeOut(100,function () {
        // generate tooltip
        $("#tooltip").fadeIn(100);
    });
}

function onmouseout() {
    $("#tooltip").fadeOut(250);
}

它有效,但表现出一种行为,即如果鼠标在多个节点上快速移动,工具提示可能仍然卡在页面上.上面的例子显示了相同的行为(快乐的摆动!).

经过一些研究,似乎nvd3使用调度很好地解决了这个问题.但是我并不清楚调度是如何工作的,基于这个问题,我想在这种情况下可能会有一个更简单的方法.

更新

此问题仅由fadeIn和fadeOut引起.如果将它们设置为零则没有问题.所以问题实际上是否可以设置它以便在存在另一个鼠标悬停/输出事件时中断fadeIn/out.

解析度

问题是只有一个工具提示.在JQuery fadeOut中间,这无法响应事件.答案是有多个工具提示,因此当旧的工具提示逐渐消失时,它可以逐渐消失.这可以通过两种方式实现:

• JQuery fadeOut
• CSS转换(NVD3使用的转换)

在回答麦克张贴在这里,他概述三种不同的方式来改变应用到基于一个指标或者自定义过滤匹配的元素.我试图澄清,希望更多的人,而不仅仅是我自己,这些解决方案中的实际选择.

因此,给定一个带有6个SVG rects with class的文档.bar,我们有这些不同的选择以及它们返回的内容:

d3.select( "巴"):

[Array[1]  
0: rect.[object SVGAnimatedString]  
length: 1  
parentNode: html  
__proto__: Array[0]  

d3.selectAll( "巴"):

[Array[6]  
0: rect.[object SVGAnimatedString]  
1: rect.[object SVGAnimatedString]  
2: rect.[object SVGAnimatedString]  
3: rect.[object SVGAnimatedString]  
4: rect.[object SVGAnimatedString]  
5: rect.[object SVGAnimatedString]  
length: 6  
parentNode: html  
__proto__: Array[0]  

$( "巴"):

[
<rect class=?"dataBars" x=?"53.191489361702125" width=?"212.7659574468085" y="4.761904761904762" height=?"11.11111111111111">?</rect>?,  
<rect class=?"dataBars" x=?"74.46808510638297" width=?"372.3404255319149" y=?"20.634920634920636" height=?"11.11111111111111">?</rect>?, 
<rect class=?"dataBars" x=?"127.6595744680851" width=?"212.7659574468085" y=?"36.507936507936506" height=?"11.11111111111111">?</rect>,?  
<rect class=?"dataBars" x=?"31.914893617021274" width=?"212.7659574468085" y=?"52.38095238095238" height=?"11.11111111111111">?</rect>?,  
<rect class=?"dataBars" x=?"159.5744680851064" width=?"265.9574468085106" y=?"68.25396825396825" …

我试图找到一些易于理解和使用的 D3 教程，这些教程特别关注如何实现和使用事件和调度函数。

有任何想法吗？