Question

我想创建一个树，其中同一个东西可以多次列出，并且在鼠标悬停时，所有相同的东西都会扩展或点亮或者其他东西。我无法弄清楚的是如何做到这一点。我最初的想法是使用像

这样的行

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

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

Food
  Vegtables
    Carrot
    Pizza
  Tastes good
    Cake
    Pizza

我希望能够做到这一点，如果我在我的树上悬停一次披萨，他们两个都将在鼠标悬停行动中做同样的事情。

Answer 1

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

您需要将class属性定义为数据的属性。例如，如果数据具有type属性，则可以将类属性定义为

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

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

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

最后，突出显示功能按类选择节点并切换活动类，该类覆盖填充颜色。

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

活动类定义为：

.node.active {
  fill: red;
}

这里的实例：

http://bl.ocks.org/3087986

有关如何选择相关节点的更多详细信息，请参阅我对how do you select (and then modify) related elements?

的回答

Answer 2

你的回答很简单。首先，您需要访问树的根目录？得到它了？好。现在，您只需在其上调用jQuery即可找到您要查找的内容，然后切换类。例如：

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

这是未经测试的，但如果构建正确，则可以正常工作

d3.js树布局如何使用函数命名类

2 个答案: