Question

我是D3.js的新手，并且已经更改了一组现有代码以正确显示循环群集。我在标题和链接线之间的附加圈中添加了“rect”项。我的问题是如何滚动标题时将相应的'rect'项设置为'on'类。在以下链接的示例中，如果我翻转'Sample Item 1'，我希望相邻的rect框将不透明度更改为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", ...);
}

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

1 个答案: