jquery - Click event for collaps and expand in D3 is not working -
i working on project in have show alot of information show in form of tree. have chosen d3.js awesome library purpose. facing problem , not resolve it. have observed many questions on stackoverflow here , here alse
i have following javascript code
var url = "/home/showtree?q="+query; var treedt = []; $('#result').show(); $.get(url, null, function (data) { $.each(data, function (index, value) { var d = { "name": "", "parent": "" } d.name = value.name; d.parent = value.parent; treedt.push(d); }); $('#result').empty(); process(); }); function process() { var datamap = treedt.reduce(function (map, node) { map[node.name] = node; return map; }, {}); var treedata = []; treedt.foreach(function (node) { // add parent var parent = datamap[node.parent]; if (parent) { // create child array if doesn't exist (parent.children || (parent.children = [])) // add node child array .push(node); } else { // parent null or missing treedata.push(node); } }); // ************** generate tree diagram ***************** var margin = { top: 20, right: 120, bottom: 20, left: 120 }, width = 3000 - margin.right - margin.left, height = 2000 - margin.top - margin.bottom; // misc. variables var = 0; var duration = 750; var tree = d3.layout.tree() .separation(function (a, b) { return ((a.parent == root) && (b.parent == root)) ? 30 : 35; }) .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function (d) { return [d.y, d.x]; }); var svg = d3.select("#result").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]; function collapse(d) { if (d.children) { d._children = d.children; d._children.foreach(collapse); d.children = null; } } //root.children.foreach(collapse); update(root); function click(d) { var concept=d.name; var p = d.parent; while (p != null) { concept += " " + p.name; p = p.parent; } //var temp = '/home/showdata?id=' + concept; //window.open(temp,'_blank'); if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); } 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.y + "," + d.x + ")"; }).on("click", click); nodeenter.append("circle") .attr("r", 4) .style("fill", "#f0f"); nodeenter.append("text") .attr("x", function (d) { return d.children || d._children ? -18 : 18; }) .attr("dy", ".25em") .attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; }) // .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); } } return false; }
and click event nothing. want collaps sibling nodes of clicked node. please suggest worried
Comments
Post a Comment