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
Post a Comment