JavaScript - D3强制布局高亮显示子树

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var force = d3.layout.force()
  .nodes(nodes)
  .links(links)
  .size([width, height])
  .linkDistance(50)
  .charge(-200)
  .start();

var node = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("r", 10)
  .style("fill", "blue")
  .call(force.drag);

var link = svg.selectAll(".link")
  .data(links)
  .enter()
  .append("line")
  .attr("class", "link")
  .style("stroke", "gray")
  .style("stroke-width", 1);

force.on("tick", function() {
  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
});

svg.selectAll(".node")
  .filter(function(d) { return d.depth === 1; })
  .style("fill", "red");