2015-06-06 2 views
3

Я пытаюсь создать небольшое приложение в PHP для веб-сайта. Для этого приложения я использую базу данных сообщества neo4j.d3.json ответ внутри неправильной переменной обратного вызова

Я пытаюсь создать красивую навигацию с графиком. Проблема заключается не в стиле, а в том, чтобы заставить график работать.

Прямо сейчас я получаю вывод neoclient (решение php для связи с базой данных neo4j) и создание JSON (ON MY OWN! Мне нужен этот шаг, потому что я хочу добавить данные других скриптов позже ... sry:()

Теперь я хочу использовать эти данные и создать их график. Все, что я получаю, это то, что все узлы и ссылки указаны как ошибка. Смешно, что я могу сказать, что график = ошибка в javascript и пункты (НЕ ССЫЛКИ:() печатаются

Я действительно искал много вещей и пытался с примерами, но я не могу найти ответ на то, что я делаю неправильно. Надеюсь, этот вопрос не глупый и Меня часто не спрашивали. Я признаю, что я новый o d3j. Может кто-нибудь сказать, что не так?

полный JSON: http://meggeslp.noxxkn.de/graph.json

порождена:

<?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; 
    } 
} 

Функция привыкают, как это: (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) ?> 

И, наконец (СРЮ для материала выше, если это не было необходимо) к фактической проблеме:

<?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> 

вы видите, что знаете в строке 41 «graph = error» ... я действительно не понимаю, почему все просто «ошибка», и это довольно неприятно. Если я сделаю этот шаг с «graph = error», все узлы будут раскрашены, но ссылки не будут.

Я попытался сделать что-то вроде упомянутого здесь: http://neo4j.com/developer/guide-data-visualization/ Мне пришлось добавить свойство «weight:», чтобы распечатать график. (упоминается в других вопросах stackoverflow). Также я хочу добавить, если вы посмотрите на кодировщик, я уже знаю, что мне нужно использовать идентификаторы массивов для ссылок, а не исходные идентификаторы ... но, возможно, я все еще делаю это неправильно? Может кто-нибудь помочь PLS?

Надеюсь, что этот вопрос в порядке спросить.

здоровается Noxxer

ответ

1

Проблема с graph быть определено в том, что вы используете очень старую версию (с 2012 года) из d3.js. Я тестировал ваш код с более новой версией, и он работает нормально. Поэтому вы должны включить его так:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> 

И ваши Связи генерируются, но не отображаются. Вы должны добавить strokecolor к вашим ссылкам, как так:

var link = svg.selectAll(".link") 
    .data(graph.links) 
    .enter() 
    .append("line") 
    .attr("class", "link") 
    .attr("stroke", "black"); 

Или вы установите stroke с помощью CSS с этим в вашем HTML голове:

<style> 
    .link { stroke: black; } 
</style> 
+0

спасибо так много ... и я просто сидел здесь, как "._____________:" .. omg, я так плачу, и спасибо – Noxxer

Смежные вопросы