d3.js - D3 Tree Brushing -


i trying brush vertical tree layout. selections not working. please me respect selection of classed node. new d3 , not able understand this.

here style sheet

        .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; 

here code

var margin = {top: 140, right: 120, bottom: 20, left: 120}, width = 960 - margin.right - margin.left,  height = 500 - margin.top - margin.bottom; var = 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 new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // normalize fixed-depth. nodes.foreach(function(d) { d.y = d.depth * 100; }); // declare nodes… var node = svg.selectall("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); }); // enter 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 links…   var link = svg.selectall("path.link")   .data(links, function(d) { return d.target.id; });   // enter 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];     });     }) 


Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -