0

我想制作一棵树，可以多次列出相同的东西，并且在鼠标悬停时，所有相同的东西都会展开或点亮或其他东西。我不知道如何做到这一点。我最初的想法是使用像

.attr("class", function(d){return d})

但这似乎不起作用。如果有人对如何做到这一点有任何想法，将不胜感激。例如，树可能看起来像

Food
  Vegtables
    Carrot
    Pizza
  Tastes good
    Cake
    Pizza

我希望能够做到这一点，这样如果我在我的树上悬停在披萨上一次，它们都会在鼠标悬停动作时做同样的事情。

4

2 回答 2

4

很可能您的代码不起作用，因为d它是一个对象（表示树中的一个节点），并且对象的默认 to-string 行为返回“[object Object]”；将类属性设置为“[object Object]”不会帮助您按类选择节点。

您需要将 class 属性定义为 data 的属性。例如，如果您的数据有一个type属性，那么您可以将类属性定义为

.attr("class", function(d) { return "node " + d.type; })

接下来，注册一个 mouseover 和 mouseout 处理程序以进行交互：

.on("mouseover", function(d) { highlight(d.type); })
.on("mouseout", function(d) { highlight(null); })

最后，highlight 函数按类选择节点并切换覆盖填充颜色的活动类。

function highlight(type) {
  if (type == null) d3.selectAll(".node").classed("active", false);
  else d3.selectAll(".node." + type).classed("active", true);
}

活动类定义为：

.node.active {
  fill: red;
}

现场示例：

有关如何选择相关节点的更多详细信息，请参阅我对如何选择（然后修改）相关元素的回答？

于 2012-07-11T04:32:12.803 回答
0

你的答案很简单。首先，您需要访问树的根目录吗？知道了？好的。现在您只需在其上调用 jQuery 来查找您要查找的内容，然后切换一个类。例子：

 $(root).find("pizza").hover(function(){
    $(this).toggleClass("colorChange");
 });

这是未经测试的，但如果构建正确，将工作

于 2012-07-10T20:14:40.310 回答