0

我正在使用 vis.js 来显示二叉树。我有关于数据库的所有信息，并按照我试图将其复制到我的需要而没有结果的文档。

我使用的文档是：

<style type="text/css">
    #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
    }
</style> </head> <body> <div id="mynetwork"></div>

// 创建一个带有节点的数组 var nodes = new vis.DataSet([ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id: 3, label: '节点 3'}, {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'} ]);

// create an array with edges
var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
]);

// create a network
var container = document.getElementById('mynetwork');

// provide the data in the vis format
var data = {
    nodes: nodes,
    edges: edges
};
var options = {};

// initialize your network!
var network = new vis.Network(container, data, options); </script> </body> </html>

住所工作得很好，但是当我改变它时，它看起来像这样：

阿奎瓦拉格拉菲卡

$.ajax({ headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
url: "obtenerNodos", data: { id : '1' }, 方法: 'post', 成功: function (data) { console.log(data);//////////////////// ////////////////

            //console.log(data[0]);
            //var res = JSON.parse(data);

            var res = data.split('"*"');

            var nd = res[0];
            var gd = res[1];

            //console.log(nd);///////////////////////////////////////
            console.log(nd);
            var nodes = new vis.DataSet(nd);
            var edges = new vis.DataSet(gd);

            // create a network
          var container = document.getElementById('mynetwork');

          // provide the data in the vis format
          var data = {
              nodes: nodes,
              edges: edges
          };

          console.log(nodes);///////////////////////////////////////
          //console.log(nd);

          var options = {
              nodes:{
                  borderWidth: 1,
                  borderWidthSelected: 2,
                  brokenImage:'http://binario.com/admin/img/profile1.jpg',            
                  color: {
                    border: '#2B7CE9',
                    background: '#97C2FC'
                    },

                  font: {
                    color: '#343434',
                    size: 14, // px
                    face: 'arial',
                    background: 'none',
                    strokeWidth: 0, // px
                    strokeColor: '#ffffff',
                    align: 'center',
                    multi: false,
                    vadjust: 0,
                    bold: {
                      color: '#343434',
                      size: 14, // px
                      face: 'arial',
                      vadjust: 0,
                      mod: 'bold'
                    },
                    ital: {
                      color: '#343434',
                      size: 14, // px
                      face: 'arial',
                      vadjust: 0,
                      mod: 'italic',
                    },
                    boldital: {
                      color: '#343434',
                      size: 14, // px
                      face: 'arial',
                      vadjust: 0,
                      mod: 'bold italic'
                    },
                    mono: {
                      color: '#343434',
                      size: 15, // px
                      face: 'courier new',
                      vadjust: 2,
                      mod: ''
                    },
                  },            
                  heightConstraint: false,
                  hidden: false,            
                  image: 'http://binario.com/admin/img/profile1.jpg',
                  level: undefined,
                  shape: 'circularImage',

                  size: 25,
                  //title: undefined,
                  //value: undefined,
                  widthConstraint: false
                },

              edges:{
                  arrows: {
                    to:     {enabled: true, scaleFactor:1, type:'arrow'},
                    middle: {enabled: true, scaleFactor:1, type:'arrow'},
                    from:   {enabled: true, scaleFactor:1, type:'arrow'}
                  },
                  color: {
                    color:'#161616',
                    highlight:'#848484',
                    hover: '#848484',
                    inherit: 'from',
                    opacity:1.0
                  }
              },

              layout: {
                  randomSeed: undefined,
                  improvedLayout:true,
                  hierarchical: {
                      enabled:true,
                      levelSeparation: 150,
                      nodeSpacing: 100,
                      treeSpacing: 200,
                      blockShifting: true,
                      edgeMinimization: false,
                      parentCentralization: true,
                      direction: 'UD',        // UD, DU, LR, RL
                      sortMethod: 'directed'   // hubsize, directed
                  }
              }
          };

          // initialize your network!
          var network = new vis.Network(container, data, options);
            //do something

        },error: function(xhr, ajaxOptions, thrownError){
                console.log(xhr.status+" ,"+" "+ajaxOptions+", "+thrownError);
            }

});

当控制台向我显示“console.log(data);”时，我得到了这个：

{id: 1, label: 'Carlos Corrales'},{id: 2, label: 'Carlos Jaramillo'},{id: 3, label: 'Carlos Jaramillo Corrales'}"*"{from: 1, to: 2 },{从：1，到：3}

当控制台向我显示“console.log(nd);”时，我得到了这个：

{id：1，标签：'Carlos Corrales'}，{id：2，标签：'Carlos Jaramillo'}，{id：3，标签：'Carlos Jaramillo Corrales'}

我很好，但是当控制台显示“console.log(nodes);”时，我明白了：

n {_options: "{id: 1, label: 'Carlos Corrales'},{id: 2, label: '...llo'},{id: 3, label: 'Carlos Jaramillo Corrales'}", _data: {... }，长度：0，_fieldId：“id”，_type：{…}，…} 长度：0 _data： proto：构造函数：ƒ Object() hasOwnProperty：ƒ hasOwnProperty() isPrototypeOf：ƒ isPrototypeOf() propertyIsEnumerable：ƒ propertyIsEnumerable( ) toLocaleString : ƒ toLocaleString() toString : ƒ toString() valueOf : ƒ valueOf() defineGetter : ƒ defineGetter () defineSetter : ƒ defineSetter () lookupGetter : ƒ lookupGetter () lookupSetter :ƒ lookupSetter () 获取原型：ƒproto () set proto : ƒ proto () _fieldId : "id" _options : "{id: 1, label: 'Carlos Corrales'},{id: 2, label: 'Carlos Jaramillo'},{id: 3, label : 'Carlos Jaramillo Corrales'}" _subscribers : {add: Array(1), update: Array(1), remove: Array(1)} _type : proto : Object proto : Object

所以说节点数组的长度为0。

我用来获取数据的代码是：

公共函数 obtenerNodos(请求 $request){

    $id = $request->id;

    $nodos = "";
    $edges = "";

    $senal = 0;

    //while ($senal == 0)
    //{
        $res = panelController::getNodos($id);
        $valores = explode("**",$res);

        $nodos .= $valores[0];

        if($valores[1] != "-99"){
            $edges .= $valores[2];
            $nodos .= ",".$valores[3];
        }

        if($valores[4] != "-99"){
            $edges .= ",".$valores[5];
            $nodos .= ",".$valores[6];
        }

        //$senal = 1;
    //}

    $nodos .= "";
    $edges .= "";

    //return $edges;

    $regreso = $nodos.'"*"'.$edges;


    return $regreso;
}

所以问题是数据没有进入节点和 enges 数组，这样我就无法得到图表。

在此处输入图像描述

4

1 回答 1

0

您可以尝试这样的事情来解决问题，因为我认为您放入 Dataset的nd和gd格式有问题

您的目标是获得一组对象，例如：

Array [Object, Object, ... etc]
 where Object {id: 0, label: "node"} - for example

执行查询时可以直接获取这种格式，并将结果放入变量中

$data = $connection->createCommand("YOUR_SQL")->queryAll();

将其转换为 JSON，然后您可以将其隐藏在 html 标记中，例如：

<p class="no_display" id="myId"><?= json_encode($data) ?></p>

将数据放入 JS 变量中，例如：

var network_nodes = JSON.parse(document.getElementById("myId").innerText);

现在只需将其分配给 DataSet：

var nodes = new vis.DataSet(network_nodes);

你做对了。

这总是对我有用，希望它有所帮助！

于 2017-08-18T10:05:05.677 回答