javascript - D3 collapsable force cannot update data --> Uncaught TypeError: Cannot read property 'node' of null -
its json
var data = [{ name:"words", children:[{ name:"nouns", children:[ { name:"table", size:1025 }, { name:"box", size:2925 }, { name:"bat", size:4025 }, ], size: 2000 }, { name:"adverbs", children:[ { name:"eagerly", size:2520 }, { name:"badly", size:3259 }, { name:"easily", size:2512 }, ], size: 425 }, { name:"adjectives", children:[ { name:"positive", children:[ { name:"amazing", size:1250 }, { name:"beautiful", size:2529 }], size:1000 }, { name:"negative", children:[ { name:"destructive", size:1250 }, { name:"hot", size:2529 }], size:1000 }, ], size: 343 }, { name:"verbs", children:[ { name:"play", size:4310 }, { name:"say", size:2943 }, { name:"ride", size:4430 }, ], size: 343 }, ], size: 2000 }]; initialized null
var g = { data: null, force: null }; created graph
$(function () { //use global var data: g.data = data; var width = 1300, height = 630; //create sized svg surface within viz: var svg = d3.select("#viz") .append("svg") .attr("width", width) .attr("height", height); g.link = svg.selectall(".link"), g.node = svg.selectall(".node"); //create graph layout engine: g.force = d3.layout.force() .linkdistance(150) .charge(-300) .gravity(0.01) .size([width, height]) //that invokes tick method draw elements in new location: .on("tick", tick); //draw graph: //note method invoked again //when clicking nodes: update(); }); function update() { //iterate through original nested data, , 1 dimension array of nodes. var nodes = flatten(g.data); //each node extracted above has children attribute. //from them, can use tree() layout function in order //to build links selection. var links = d3.layout.tree().links(nodes); // pass both of sets graph layout engine, , restart here error occur
g.force.nodes(nodes) //here error occur .links(links) .start(); /////////////////////////////////////////////////////////////////// //------------------- // create subselection, wiring data, using function define //how it's suppossed know appended/updated/exited g.link = g.link.data(links, function (d) {return d.target.id;}); //get rid of old links: g.link.exit().remove(); //build new links adding new svg lines: g.link .enter() .insert("line", ".node") .attr("class", "link"); // create subselection, wiring data, using function define //how it's suppossed know appended/updated/exited g.node = g.node.data(nodes, function (d) {return d.id;}); //get rid of old nodes: g.node.exit().remove(); //------------------- //create new nodes making groupd elements, contain circls , text: var nodeenter = g.node.enter() .append("g") .attr("class", "node") .on("click", click) .call(g.force.drag); //circle within single node group: nodeenter.append("circle") .attr("r", function (d) {return math.sqrt(d.size) || 50;}); //text within single node group: nodeenter.append("text") .attr("dy", ".35em") .text(function (d) { return d.name; }); //all nodes, following: g.node.select("circle") .style("fill", color); //calls delegate //------------------- } // invoked 'update'. // original source data not usual nodes + edge list, // that's what's needed force layout engine. // returns list of nodes under root. function flatten(data) { var nodes = [], = 0; //count children (not _children) //note doesn't count descendents of collapsed _children //rather elegant? function recurse(node) { if (node.children) node.children.foreach(recurse); if (!node.id) node.id = ++i; nodes.push(node); } recurse(data); //done: return nodes; } update(); //invoked 'update' //return color of node //based on children value of //source data item: {name=..., children: {...}} function color(d) { return d._children ? "#3182bd" // collapsed package : d.children ? "#c6dbef" // expanded package : "#fd8d3c"; // leaf node } // toggle children on click switching around values on _children , children. function click(d) { if (d3.event.defaultprevented) return; // ignore drag if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } // update(); } //event handler every time force layout engine //says redraw everthing: function tick() { width=1300; height=630; r=60; g.node.attr("cx", function(d) { return d.x = math.max(r, math.min(width - r, d.x)); }) .attr("cy", function(d) { return d.y = math.max(r, math.min(height - r, d.y)); }); //redraw position of every link within link set: g.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; }); //same nodes, using functor: g.node.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }); } **whenever add new json same format doesnt show anything. , error tracebacks code == update(); ==
jquery version: 2.1.3
d3 version : 3.4.13
dont know if matters or not intergrating in http://metroui.org.ua/ metro ui tabs please help!**
Comments
Post a Comment