Reading d3js interactive graph data from mysql

Question

Im trying to create an interactive network in d3js for which ive used php to fetch the data in json format inside the d3js.

This is what 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 the distinct nodes from the 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 force = 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 the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start();

  // Update links.
  link = link.data(links, function(d) { return d.target.id; });

  link.exit().remove();

  link.enter().insert("line", ".node")
      .attr("class", "link");

  // Update nodes.
  node = node.data(nodes, function(d) { return 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) { return Math.sqrt(d.size) / 10 || 4.5; });

  nodeEnter.append("text")
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

  node.select("circle")
      .style("fill", color);
}

function tick() {
  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; });

  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

function color(d) {
  return d._children ? "#3182bd" // collapsed package
      : d.children ? "#c6dbef" // expanded package
      : "#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 a list of all nodes under the link.
function flatten(link) {
  var nodes = [], i = 0;

  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }
  recurse(link);
  return 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 is that its not displaying anything. I want the above page to display the data which its fetching from the mysql (in form of json using php) like this :- 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 force = 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 the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start();

  // Update links.
  link = link.data(links, function(d) { return d.target.id; });

  link.exit().remove();

  link.enter().insert("line", ".node")
      .attr("class", "link");

  // Update nodes.
  node = node.data(nodes, function(d) { return 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) { return Math.sqrt(d.size) / 10 || 4.5; });

  nodeEnter.append("text")
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

  node.select("circle")
      .style("fill", color);
}

function tick() {
  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; });

  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

function color(d) {
  return d._children ? "#3182bd" // collapsed package
      : d.children ? "#c6dbef" // expanded package
      : "#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 a list of all nodes under the root.
function flatten(root) {
  var nodes = [], i = 0;

  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }
  recurse(root);
  return 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 is fetching data from mysql-databse in json, via data.php . I.E where/in_which variable is the data being stored by this call :- d3.json("data.php.php", function(error, links)

Whereas SAMPLE_CODE has hardcoded root{} data.

ANd this is what exactly my question is related to, i.e. how do I do the same operations as done on root{} (in the SAMPLE_CODE) on my json_data fetched via data.php in MY_CODE ? In order to make MY_CODE work like SAMPLE_CODE , I need to replace the root{} data in SAMPLE_CODE with the data that is being fetched from the data.php page in a proper format in MY_CODE for it to work. But I dont know where and what line to change so as to make the page of MY_CODE appear like SAMPLE_CODE.

SAMPLE json_array being 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"},.........]

@shalini thanks for the edit. That is basically what im asking. Where exactly is the data.php storing the values? in which variable ? — user4197202
– user4197202, Commented Nov 6, 2014 at 5:42
Ive added this : root=json; console.log(root) , So the json_array should be getting fed in root (and generating an array as in case of SAMPLE_CODE) But still it doesnt work !!! Please help — user4197202
– user4197202, Commented Nov 6, 2014 at 8:13
@Gilsha thanks, Ive incorporated those changes in my code and updated the same on this page in MY_CODE, but still not working — user4197202
– user4197202, Commented Nov 6, 2014 at 8:50
In this code d3.json("data.php.php", function(error, links) , links contains the json response. Try root=links; instead of root=json. Here json is undefined. — Gilsha
– Gilsha, Commented Nov 6, 2014 at 9:03

Collectives™ on Stack Overflow

Reading d3js interactive graph data from mysql

0

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest

Linked