D3.json response inside wrong callback variable
I am trying to create a small application in PHP for a website. For this application I am using the neo4j community database.
I am trying to create a nice graph navigation. The problem is not style, but getting the schedule to work.
Right now I am getting the output of neoclient (php solution for communicating with neo4j database) and generating JSON (ON MY OWN! I need this step because later I want to add other scripts data ... sry: ().
Now I want to use this data and create a graph. All I get is that all nodes and links are listed as error. It's funny that I can say that the graph = error in javascript and the points (NOT THE LINKS :() are printed.
I have actually searched a lot of things and tried with examples, but I cannot find an answer to what I am doing wrong. Hopefully this question is not stupid and hasn't been asked often. I admit that I am new to d3j. Can anyone tell me what is wrong?
complete json: http://meggeslp.noxxkn.de/graph.json
generated by:
<?php namespace engine\encoder;
class GraphJSONEncoder {
public static function encodeNeo4JResponse($response) {
$result = "{ ";
//$result .= '"comment": "Automatic Generated JSON Response by HIDDEN ; )" , ';
$result .= '"nodes": [ ';
$i = 0;
$num = count($response->getNodes());
$ids = [];
foreach ($response->getNodes() as $node) {
$result .= "{ ";
foreach($node->getProperties() as $name => $prop) {
$result .= '"'.$name.'": "'.$prop.'", ';
}
$result .= '"label": "'.$node->getLabel().'",';
$result .= '"id": '. $node->getId().' ';
$result .= " }";
if(++$i !== $num) {
$result .= ", ";
}
$id[$node->getId()] = $i-1;
}
$result.= '], "links": [ ';
$i = 0;
$num = count($response->getRelationships());
foreach ($response->getRelationships() as $rel) {
$result .= "{";
$result .= '"source": '.$id[$rel->getStartNode()->getId()].',';
$result .= '"target": '.$id[$rel->getEndNode()->getId()].',';
$result .= '"type": "'.$rel->getType().'",';
$result .= '"weight": 1';
$result .= " }";
if(++$i !== $num) {
$result .= ", ";
}
}
$result.= "]}";
return $result;
}
}
The function will be used like this: (graphgenerator.php)
<?php namespace mygn;
require_once '../vendor/autoload.php';
use mygn\application\Application;
use engine\database\Query;
use engine\encoder\GraphJSONEncoder;
$app = Application::getInstance();
$app->init();
$app->run();
$result = $app->dbProxy()->query(new Query("neo4j", "MATCH n-[r]->g RETURN n,r,g;"));
?><?= GraphJSONEncoder::encodeNeo4JResponse($result) ?>
And finally (sit down for what came above if it wasn't necessary) to the real problem:
<?php namespace mygn;
require_once 'vendor/autoload.php';
use mygn\application\Application;
use engine\database\Query;
$app = Application::getInstance();
$app->init();
$app->run();
<!DOCTYPE html>
<html style="height:100%">
<head >
<title>MYGN</title>
<meta charset="UTF-8">
<link href="external/jquery-ui/jquery-ui.css" rel="stylesheet">
<script src="external/jquery-ui/external/jquery/jquery.js"></script>
<script src="external/jquery-ui/jquery-ui.js"></script>
<script src="http://d3js.org/d3.v2.js?2.9.3" charset="utf-8"></script>
</head>
<body style="height:100%">
<div id="graph" style="height:100%"></div>
<script>
var width = 800, height = 800;
// force layout setup
var force = d3.layout.force()
.charge(-200).linkDistance(30).size([width, height]);
// setup svg div
var svg = d3.select("#graph").append("svg")
.attr("width", "100%").attr("height", "100%")
.attr("pointer-events", "all");
// load graph (nodes,links) json from /graph endpoint
d3.json("calls/graphgenerator.php", function(error, graph) {
console.log(error);
graph = error;
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
</body>
</html>
you see on line 41 "graph = error" ... I really don't understand why this is just an "error" and it's pretty frustrating. If I do this step with "graph = error", all nodes are colored, but no links.
I tried to do something like the one mentioned here: http://neo4j.com/developer/guide-data-visualization/ I had to add a "weight:" property to print the plot. (mentioned in other stackoverflow questions). Also I want to add, if you look at the encoder, I already know that I need to use array IDs for references, not original IDs ... but maybe I am still doing it wrong? Can anyone pls help?
Hope this question gets approved.
Welcomes Noxxer
source to share
The problem with graph
undefined is that you are using a very old version (since 2012) of d3.js. I tested your code with a newer version and it works fine. Therefore, you must enable it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
And your Links are generated but not displayed. You should add lines of code to your links, for example:
var link = svg.selectAll(".link")
.data(graph.links)
.enter()
.append("line")
.attr("class", "link")
.attr("stroke", "black");
Or you install stroke
via CSS using this in your html header:
<style>
.link { stroke: black; }
</style>
source to share