是否有d3.js自定义选择的最佳做法?

时间:2016-06-16 11:42:46

标签: d3.js

我是d3.js的新手。我知道我可以使用node = svg.selectAll(".node")选择整组节点,例如selectAll并调用所有这些方法。

但是,如果我不希望将这些方法应用于所有节点,例如除了一个节点之外,我最好怎么做?

对由例如另一个子集定义的另一个子集执行for另一个班级?

或者更一般地说:给定d3.js特定选择方法,选择不同节点子集的习惯是什么?为每个子集定义一个类,并根据该类进行选择?我想知道在这种情况下,在if选择子集的所有节点上{{1}}循环是否是一个很好的解决方案?

3 个答案:

答案 0 :(得分:0)

您可以使用以下语法根据其ID:

选择特定节点
select = d3.select('#nodeID')

答案 1 :(得分:0)

你可以像这样链接selectAll()

d3.selectAll("tr").selectAll("td");

(见https://bost.ocks.org/mike/selection/

或者您可以使用filter()删除一些元素

(见https://github.com/d3/d3/wiki/Selections#filter

或者你可以排除一个这样的元素

  d3.selectAll('.node:not(#idToExclude)').remove()

(请参阅此示例https://jsfiddle.net/oxj78cfv/1/

答案 2 :(得分:0)

如果您的元素具有特定的类或ID,则可以使用:not()选择器。

例如,在这个小提琴中,我创建了一堆圈子,有5个不同的类,从class0class4。这将选择所有不是class2的圈子,并在您点击按钮时使其透明:

svg.selectAll("*:not(.class2)").attr("opacity", 0);

这是小提琴:https://jsfiddle.net/gerardofurtado/wzfmzeqz/3/

如果您要避免的一个元素具有给定的ID(ID是唯一的),您可以写:

svg.selectAll("*:not(#foo)")

以下是有关否定伪类的文档:https://www.w3.org/TR/selectors/#negation