从查询结果中使用vis.js

问题描述 投票：0回答：1

我正在使用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，标签：'节点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'：$（'meta [name =“csrf-token”]'）。attr（'content'）}， url：“obtenerNodos”，数据：{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 }，{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：ƒdecineSetetter（）defineSetter：ƒdecineSetter（）lookupGetter：ƒlookupGetter（）lookupSetter：ƒcheinSetSet（）get proto：ƒ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。

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

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

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

enter image description here

javascript laravel-5.3 vis.js vis.js-network
1个回答
0
投票

您可以尝试这样的方法来解决问题，因为我认为您对数据集的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);

你做对了

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.