D3.js群集翻转 - 如何选择和更改另一个元素

Question

我是D3.js的新手，已经改变了现有的一组代码以正确显示圆形群集。我在标题和链接线之间的另一个圆圈中添加了“rect”项目。我的问题是如何在滚动标题时将相应的'rect'项设置为'on'类。在以下链接的示例中，如果我翻转“示例项目1”，我希望邻居矩形框将不透明度更改为1和/或更改颜色。同样，如果我翻转矩形框，我希望它的标题改变样式（不透明度和/或颜色）。这么近却又是那么远......

http://www.itq9.co.uk/d3/sample1

我的想法是，我需要添加正确的选择的mouseoverd功能：

function mouseovered(d) { 
    node 
    .each(function(n) { n.target = n.source = false; }); 

link 
    .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; }) 
    .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; }) 
    .filter(function(l) { return l.target === d || l.source === d; }) 
    .each(function() { this.parentNode.appendChild(this); }); 

node 
    .classed("node--target", function(n) { return n.target; }) 
    .classed("node--source", function(n) { return n.source; }); 

rect 
    .classed("rect--target", function(r) { return r.target; }) 
    .classed("node--source", function(r) { return r.source; }); 

} 

Answer 1

在你的情况，你需要的鼠标悬停处理程序仅适用于标题元素，而不是矩形 - 当鼠标悬停标题而不是矩形时，您希望发生某种情况。为此，您必须选择与标题相对应的rect并进行更改。这样做的一种方法是为rect元素设置ID，使其可以直接从绑定到标题的数据中识别。你没有这样做，所以你可以使用D3的数据匹配和过滤来识别元素：

function mouseovered(d) { 
    rect 
.data(nodes.filter(function(n) { return !n.children; })) 
    .filter(function(e) { return e == d; }) 
    // the selection will contain the corresponding rect element after this 
    .attr("fill", ...); 
}