Question

我试图在PHP中为网站创建一个小应用程序。对于这个应用程序，我使用neo4j社区数据库。

我试图用图表创建漂亮的导航。问题不在于样式，而在于使图表运行。

现在我得到neoclient的输出（与neo4j数据库通信的php解决方案）和创建JSON（我自己！我需要这一步因为，我想稍后添加其他脚本的数据... sry :( ）。

现在我想使用这些数据并创建它的图表。我得到的是所有节点和链接都是错误的。有趣的是，我可以说javascript中的graph =错误和点（不是链接:(）得到打印。

我真的搜索了很多东西，并尝试了一些例子，但我无法找到我做错的答案。希望这个问题不是愚蠢的，也不会经常被问到。我承认我是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行＆＃34; graph =错误＆＃34; ...我真的不明白为什么一切都只是简单的错误＆＃34;而且非常令人沮丧。如果我使用＆＃34; graph = error＆＃34;执行此步骤所有节点都被绘制但链接没有。

我尝试过这里提到的事情：http://neo4j.com/developer/guide-data-visualization/ 我不得不添加＆＃34;重量：＆＃34;用于打印图表的属性。（在其他stackoverflow问题中提到）。另外我想添加，如果你看看编码器我已经知道我必须使用数组的ID为链接而不是原始的ID ...但也许我仍然这样做错了？有人可以帮忙吗？

希望这个问题可以问。

迎接Noxxer

Answer 1

graph未定义的问题是，您使用的是d3.js的旧版本（2012年）。我用更新的版本测试了你的代码，它运行得很好。所以你应该这样包括它：

<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");

或者您在html head中通过CSS设置stroke：

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

d3.json响应错误的回调变量

1 个答案: