D3 Tree Brushing

Question

我正在尝试刷一个垂直树布局。 但选择不起作用。 请帮助我选择分类节点。 我是D3的新手，无法理解这一点。

这是我的样式表

        .node  {
        stroke: black;
        stroke-width: 1px;
         }
        .node .selected { 
        stroke: red;
         }
        .node text { font: 10px sans-serif; }
        .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1px;
         }
        .brush .extent {
         fill-opacity: .1;
        stroke: #fff;
        shape-rendering: crispEdges;

这是我的代码

var margin = {top: 140, right: 120, bottom: 20, left: 120},
width = 960 - margin.right - margin.left, 
height = 500 - margin.top - margin.bottom;
var i = 0;
var tree = d3.layout.tree()
.size([height, width]);

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });

var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");  
 root = treeData[0];
 update(root);


function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 100; });
// Declare the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter the nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
 return "translate(" + d.x + "," + d.y + ")"; });
 nodeEnter.append("circle")
 .attr("r", 10)
 .style("fill", "#fff");

 nodeEnter.append("text")
 .attr("y", function(d) {
 return d.children || d._children ? -18 : 18; })
 .attr("dy", ".35em")
 .attr("text-anchor", "middle")
 .text(function(d) { return d.name; })
 .style("fill-opacity", 1);
  // Declare the links…
  var link = svg.selectAll("path.link")
  .data(links, function(d) { return d.target.id; });
  // Enter the links.
  link.enter().insert("path", "g")
  .attr("class", "link")
  .attr("d", diagonal);
   }

  var brush = svg.append("g")
  .attr("class", "brush")
  .call(d3.svg.brush()
  .x(d3.scale.identity().domain([0, 1000]))
   .y(d3.scale.identity().domain([0, 1000]))
   .on("brush",function(){
    var extent =d3.event.target.extent();
    console.log(extent);
    svg.selectAll(".node")
    .classed("selected",function(d){
     // return true;



    return extent[0][1] <= d.x && d.x < extent[1][0]
    && extent[0][1] <= d.y && d.y < extent[1][1];
    });
    })