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

【问题标题】：d3.js tree layout how to name classes using a functiond3.js 树布局如何使用函数命名类
【发布时间】：2012-07-10 19:33:51
【问题描述】：

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

这样的行

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

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

Food
  Vegtables
    Carrot
    Pizza
  Tastes good
    Cake
    Pizza

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

【问题讨论】：

曾经尝试过 jQuery.find() 函数吗？
我不知道 jQuery（我知道我应该学习它），但我认为该函数的作用是查找具有特定类名的所有节点。我需要做的是使树使所有具有相同名称的节点具有相同的类。所以重申一下，我试图给他们类名，而不是找到他们。这是这样做的吗？我不确定。不过谢谢

标签： javascript tree d3.js

【解决方案1】：

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

您需要将类属性定义为数据的属性。例如，如果您的数据具有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);
}

active 类定义为：

.node.active {
  fill: red;
}

此处的示例：

http://bl.ocks.org/3087986

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：