如何为树节点的所有后代提供一个类

Question

Using d3js, in my tree layout, I need to change some properties of a selected node (choix1) and also all its descendants, so I would like to give for all descendants a class (choix2)

  .on("click", function() {
    d3.select(this).classed("choix1", true); // selecting a node
    d3.select(".choix1").children.classed("choix2", true); // giving a class (choix2) for all descendants
  })

It's ok for the selected node, I expect a modification in the descendants properties, but the actual properties are the old ones (there is no modifocations).

Answer 1

You are mixing D3 API with DOM API methods which, obviously, will not work. Trying to access the .children property on the D3 selection returned by d3.select(".choix1") breaks because that property is part of the interface ParentNode which is implemented by the DOM's Element interface being a parent interface of your actual elements.

If you want to use the .classed() method to set the class on the child elements you have to wrap them into a D3 selection by first calling .selectAll(this.children) . Your code thus becomes:

.on("click", function() {
  d3.select(this).classed("choix1", true); 
  d3.selectAll(this.children)   // wrap the children in a D3 selection first...
    .classed("choix2", true);   // then call methods on that selection.
})