如何导入json文件以在vis.js中显示网络中的标题节点

时间:2019-07-15 20:51:19

标签: javascript json vis.js

我正在尝试从json文件导入节点属性,并在悬停时将其显示在title字段中。告诉我,我需要添加什么代码?

也许我使用了错误的JSON格式。但是,我在vis.js的示例中找到了这种格式。但是我没有找到如何从这样的文件中获取这些属性。

例如JSON文件:

{
"edges": [
        {
            "from": "3520922",
            "label": "blah-blah",
            "to": "1384232"
        },
        {
            "from": "1384232",
            "label": "blah-blah-blah-blah",
            "to": "3520922"
        }
],
   "nodes": [
        {
            "attributes": {
                "ID-company": "3520922",
                "Name": "The Coca-Cola Company",
                "Status": "In work",
            },
            "id": "3520922",
            "label": "Coca-Cola"
        },
        {
            "attributes": {
                "ID-company": "1384232",
                "Name": "PepsiCo, Inc.",
                "Status": "In work",
            },
            "id": "1384232",
            "label": "Pepsi"
        }
]
}

还有JS代码。


var json = $.getJSON("data/company.json")
  .done(function(data){
    var data = {
      nodes: data.nodes,
      edges: data.edges,
    };
    var network = new vis.Network(container, data, options);
  });

var options = {
         "title": "HERE NEED HELP!!!",
         nodes: {
                 shape: 'dot',
                 size: 15,
                 font: {
                 size: 10,
                 color: '#ffffff'
                },
                label: {
                    enabled: true,
                    min: 14,
                    max: 30,
                    maxVisible: 20,
                    drawThreshold: 5
                },
                 borderWidth: 1
              },
         edges: {
            arrows: {
                    to: {enabled: true, scaleFactor:1, type:'arrow'},
                    from: {enabled: true, scaleFactor:0.3, type:'arrow'}
                },

            smooth: {
                  enabled: true,
                  type: "continuous",
                  roundness: 1
            },
         physics: {
                    forceAtlas2Based: {
                        gravitationalConstant: -50,
                        centralGravity: 0.00005,
                        springLength: 200,
                        springConstant: 0.18
                    },
                    maxVelocity: 146,
                    solver: 'forceAtlas2Based',
                    timestep: 0.35,
                    stabilization: {iterations: 100}
                }
    };


var container = document.getElementById('under');

该代码非常适合构建 网络。但是属性拉出失败。

0 个答案:

没有答案