Question

我正在使用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，标签：'节点1'}， {id：2，label：'Node 2'}， {id：3，label：'Node 3'}， {id：4，label：'Node 4'}， {id：5，标签：'节点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>

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

aqui va la grafica

$ .ajax（{headers：{'X-CSRF-TOKEN'： $（ '元[名称= “CSRF令牌”]'）。ATTR（ '内容'）}，
url：“obtenerNodos”，数据：{id：'1'}，方法：'post'，成功：函数（数据）{ 的console.log（数据）; /////////////////////////////////////////

            //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，标签：'Carlos Jaramillo Corrales'}“*”{来自：1， to：2}，{from：1，to：3}

当控制台显示“console.log（nd）;”时，我明白了：

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

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

n {_options：“{id：1，label：'Carlos Corrales'}，{id：2，label： '... llo'}，{id：3，label：'Carlos Jaramillo Corrales'}“，_ data：{...}， length：0，_ fieldId：“id”，_ type：{...}，...} length：0 _data： proto ：构造函数：ƒObject（）hasOwnProperty：ƒhasOwnProperty（）isPrototypeOf：ƒisPrototypeOf（） propertyIsEnumerable：ƒpropertiesIsEnumerable（）toLocaleString：ƒ toLocaleString（）toString：ƒtoString（）valueOf：ƒvalueOf（） defineGetter ：ƒ defineGetter （） defineSetter ：ƒ defineSetter （） lookupGetter ：ƒ lookupGetter （） lookupSetter ：ƒ lookupSetter （）获取原型：ƒ原型（）设置原型：ƒ 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 ：对象 proto ：对象

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

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

public function obtenerNodos（Request $ 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;
}

所以问题是数据没有进入节点并进入数组，这样我就无法获得图形。

Answer 1

您可以尝试这样的方法来解决问题，因为我认为您对数据集

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

你做得对。

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

使用查询结果

1 个答案: