Javascript D3.js中的悬停效果

这是我的第一个（也许是第二个）问题。抱歉，如果无法格式化或缺少关键数据段。将在需要时进行更新

为一个小项目准备以下代码。我正在使用d3.js可视化/表示库：

{
“名称”：“超级快乐时光”，
“儿童”：[
{“name”：“a”，“size”：200，“url”：“www.google.com”}，
{“name”：“b”，“size”：200，“url”：“www.altavista.com”}
]
}

/**CSS*/
.节点圆{
填充：#fff；
行程：#900000；
笔划宽度：1.5px；
}
.节点文本{
颜色：红色；
文本阴影：#fff 0px 1px 0，#000 0-1px 0；
}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：2px；
}

可变宽度=500，
高度=500；
var cluster=d3.layout.cluster（）
.尺寸（[高度、宽度-300]）；
var diagonal=d3.svg.diagonal（）
.投影（函数（d）{返回[d.y，d.x]；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“翻译（120,0）”）；
json（#这里非常有趣#，函数（错误，根）{
如果（错误）抛出错误；
var节点=集群节点（根节点），
链接=集群。链接（节点）；
var link=svg.selectAll（“.link”）
.数据（链接）
.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，对角线）；
var node=svg.selectAll（“.node”）
.数据（节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+d.y+”，“+d.x+”）”）；}）
node.append（“圆”）
.attr（“r”，4.5）；
node.append（“文本”）
.attr（“dx”，函数（d）{返回d.children？-8:8；}）
.attr（“dy”，3）
.style（“文本锚定”，函数（d）{返回d.children？“结束”：“开始”}）
.text（函数（d）{返回d.name；}）
})
});
d3.选择（self.frameElement）.style（“height”，height+“px”）；

以下是解决此问题的方法：

（1） 这样，当您单击它时，就会打开url

将单击侦听器附加到圆圈，获取url并制作一个选项卡

.on("click", function (d) {
    if(d.url){
        var win = window.open(d.url, '_blank');
        win.focus();
    }
})

（2） 当您悬停时，它会将文本更改为蓝色。 您必须在节点上注册鼠标悬停和鼠标移出。 将鼠标悬停在文本上方，使文本变为蓝色 在老鼠出来的时候，你把它弄得像这样黑

.on("mouseover", function (d) {
   d3.select(this.parentNode).select("text").style("fill", "blue");
}).on("mouseout", function (d) {
d3.select(this.parentNode).select("text").style("fill", "black");
}).

因此，总的来说，它将是这样的：

d3.select(this.parentNode).select("text").style("fill", "blue");
}).on("mouseout", function (d) {
    d3.select(this.parentNode).select("text").style("fill", "black");
}).on("click", function (d) {
    if (d.url) {
        var win = window.open(d.url, '_blank');
        win.focus();
    }
});

---

完整的工作代码。

是否需要使用这种奇怪的语法

d3.select（this.parentNode）。select（“text”）

而不是这个.style。。。。？