javascript - Reading d3js interactive graph data from mysql -
javascript - Reading d3js interactive graph data from mysql -
im trying create interactive network in d3js ive used php fetch info in json format within d3js.
this ive written :- my_code
<!doctype html> <meta charset="utf-8"> <title>test</title> <style> .node circle { cursor: pointer; stroke: #3182bd; stroke-width: 1.5px; } .node text { font: 10px sans-serif; pointer-events: none; text-anchor: middle; } line.link { fill: none; stroke: #9ecae1; stroke-width: 1.5px; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> d3.json("data.php.php", function(error, links) { var nodes = {}; root=json; console.log(root) // compute distinct nodes links. links.foreach(function(link) { link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); link.value = +link.value; }); var width = 1700, height = 1000; var forcefulness = d3.layout.force() .linkdistance(150) .charge(-120) .gravity(.05) .size([width, height]) .on("tick", tick); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var link = svg.selectall(".link"), node = svg.selectall(".node"); flatten(link); //to set ids setparents(link, null); collapseall(link); link.children = link._children; link._children = null; update(); function update() { var nodes = flatten(link), links = d3.layout.tree().links(nodes); // restart forcefulness layout. forcefulness .nodes(nodes) .links(links) .start(); // update links. link = link.data(links, function(d) { homecoming d.target.id; }); link.exit().remove(); link.enter().insert("line", ".node") .attr("class", "link"); // update nodes. node = node.data(nodes, function(d) { homecoming d.id; }); node.exit().remove(); var nodeenter = node.enter().append("g") .attr("class", "node") .on("click", click) .call(force.drag); nodeenter.append("circle") .attr("r", function(d) { homecoming math.sqrt(d.size) / 10 || 4.5; }); nodeenter.append("text") .attr("dy", ".35em") .text(function(d) { homecoming d.name; }); node.select("circle") .style("fill", color); } function tick() { link.attr("x1", function(d) { homecoming d.source.x; }) .attr("y1", function(d) { homecoming d.source.y; }) .attr("x2", function(d) { homecoming d.target.x; }) .attr("y2", function(d) { homecoming d.target.y; }); node.attr("transform", function(d) { homecoming "translate(" + d.x + "," + d.y + ")"; }); } function color(d) { homecoming d._children ? "#3182bd" // collapsed bundle : d.children ? "#c6dbef" // expanded bundle : "#fd8d3c"; // leaf node } // toggle children on click. function click(d) { if (d3.event.defaultprevented) return; // ignore drag if (d.children) { collapseall(d); } else { if (d._parent){ d._parent.children.foreach(function(e){ if (e != d){ collapseall(e); } }); } d.children = d._children; d._children = null; } update(); } function collapseall(d){ if (d.children){ d.children.foreach(collapseall); d._children = d.children; d.children = null; } else if (d._childred){ d._children.foreach(collapseall); } } // returns list of nodes under link. function flatten(link) { var nodes = [], = 0; function recurse(node) { if (node.children) node.children.foreach(recurse); if (!node.id) node.id = ++i; nodes.push(node); } recurse(link); homecoming nodes; } function setparents(d, p){ d._parent = p; if (d.children) { d.children.foreach(function(e){ setparents(e,d);}); } else if (d._children) { d._children.foreach(function(e){ setparents(e,d);}); } } </script> </body> the problem not displaying anything. want above page display info fetching mysql (in form of json using php) :- sample_code
<!doctype html> <meta charset="utf-8"> <title>stores_network_demo</title> <style> .node circle { cursor: pointer; stroke: #3182bd; stroke-width: 1.5px; } .node text { font: 10px sans-serif; pointer-events: none; text-anchor: middle; } line.link { fill: none; stroke: #9ecae1; stroke-width: 1.5px; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var width = 960, height = 500, root = { "name": "chocolate", "tag":"class", "children": [ { "name": "wafer", "tag":"subclass", "children": [ { "name": "nestle", "tag":"company", "children": [ {"name": "kitkat", "tag":"product"} ] } ] }, { "name": "white", "tag":"subclass", "children": [ { "name": "nestle", "tag":"company", "children": [ {"name": "milkybar", "tag":"product"} ] } ] }, { "name": "caramel", "tag":"subclass", "children": [ { "name": "nestle", "tag":"company", "children": [ {"name": "barone", "tag":"product"} ] } ] }, { "name": "milk", "tag":"subclass", "children": [ { "name": "nestle", "tag":"company", "children": [ {"name": "nestle milk", "tag":"product"} ] }, { "name": "cadbury", "tag":"company", "children": [ {"name": "dairy milk", "tag":"product"} ] } ] } ] }; var forcefulness = d3.layout.force() .linkdistance(150) .charge(-120) .gravity(.05) .size([width, height]) .on("tick", tick); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var link = svg.selectall(".link"), node = svg.selectall(".node"); flatten(root); //to set ids setparents(root, null); collapseall(root); root.children = root._children; root._children = null; update(); function update() { var nodes = flatten(root), links = d3.layout.tree().links(nodes); // restart forcefulness layout. forcefulness .nodes(nodes) .links(links) .start(); // update links. link = link.data(links, function(d) { homecoming d.target.id; }); link.exit().remove(); link.enter().insert("line", ".node") .attr("class", "link"); // update nodes. node = node.data(nodes, function(d) { homecoming d.id; }); node.exit().remove(); var nodeenter = node.enter().append("g") .attr("class", "node") .on("click", click) .call(force.drag); nodeenter.append("circle") .attr("r", function(d) { homecoming math.sqrt(d.size) / 10 || 4.5; }); nodeenter.append("text") .attr("dy", ".35em") .text(function(d) { homecoming d.name; }); node.select("circle") .style("fill", color); } function tick() { link.attr("x1", function(d) { homecoming d.source.x; }) .attr("y1", function(d) { homecoming d.source.y; }) .attr("x2", function(d) { homecoming d.target.x; }) .attr("y2", function(d) { homecoming d.target.y; }); node.attr("transform", function(d) { homecoming "translate(" + d.x + "," + d.y + ")"; }); } function color(d) { homecoming d._children ? "#3182bd" // collapsed bundle : d.children ? "#c6dbef" // expanded bundle : "#fd8d3c"; // leaf node } // toggle children on click. function click(d) { if (d3.event.defaultprevented) return; // ignore drag if (d.children) { collapseall(d); } else { if (d._parent){ d._parent.children.foreach(function(e){ if (e != d){ collapseall(e); } }); } d.children = d._children; d._children = null; } update(); } function collapseall(d){ if (d.children){ d.children.foreach(collapseall); d._children = d.children; d.children = null; } else if (d._childred){ d._children.foreach(collapseall); } } // returns list of nodes under root. function flatten(root) { var nodes = [], = 0; function recurse(node) { if (node.children) node.children.foreach(recurse); if (!node.id) node.id = ++i; nodes.push(node); } recurse(root); homecoming nodes; } function setparents(d, p){ d._parent = p; if (d.children) { d.children.foreach(function(e){ setparents(e,d);}); } else if (d._children) { d._children.foreach(function(e){ setparents(e,d);}); } } </script> my_code fetching info mysql-databse in json, via data.php . i.e where/in_which variable info beingness stored phone call :- d3.json("data.php.php", function(error, links)
whereas sample_code has hardcoded root{} data.
and question related to, i.e. how do same operations done on root{} (in sample_code) on json_data fetched via data.php in my_code ? in order create my_code work sample_code , need replace root{} info in sample_code info beingness fetched data.php page in proper format in my_code work. dont know , line alter create page of my_code appear sample_code.
sample json_array beingness read data.php :
[{"source":"2","target":"211","value":"1"},{"source":"21","target":"24","value":"1"},{"source":"2","target":"214","value":"1"},{"source":"3","target":"202","value":"1"},{"source":"2","target":"214","value":"1"},{"source":"2","target":"214","value":"1"},.........] javascript php mysql json d3.js
Comments
Post a Comment