从 json 导入时，vis.js 无法更改边缘颜色

Question

I am trying to import a network json file to vis.js and would like to have all the edges displayed in their respective colors.我正在尝试将网络 json 文件导入到 vis.js 并希望以各自的颜色显示所有边缘。

It works for nodes but not for edges, is there a way to display edges independently from their respective nodes ?它适用于节点但不适用于边，有没有办法独立于它们各自的节点显示边？ Any guidance is appreciated任何指导表示赞赏

here is the json file这是json文件

{ 
  "nodes":
  [
    {
      "id": "1",
      "label": "A",
      "color": "rgb(128,128,128)"
    },
    {
      "id": "2", 
      "label": "B",
      "color": "rgb(0,255,0)"
    },
    {
      "id": "3", 
      "label": "C",
      "color": "rgb(0,0,255)"
    }
  ],
  "edges": 
  [
    {
      "source": "1",
      "target": "2", 
      "id": "1", 
      "color": "rgb(255,0,0)"
    },
    { 
      "source": "1",
      "target": "3",
      "id": "2",
      "color": "rgb(0,0,0)"
     }
  ]
}

Here is the HTML page这是 HTML 页面

 <!DOCTYPE html> <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF8"> <title>Dynamic Data - Importing from Gephi (JSON)</title> <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> <style type="text/css"> #mynetwork { width: 800px; height: 800px; border: 1px solid lightgray; } div.nodeContent { position: relative; border: 1px solid lightgray; width: 480px; height: 780px; margin-top: -802px; margin-left: 810px; padding: 10px; } pre { padding: 5px; margin: 5px; } .string { color: green; } .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; } </style> </head> <body> <h2>Importing from Gephi (JSON)</h2> <div id="mynetwork"></div> <div class="edgeContent"><h4>Node Content:</h4> <pre id="edgeContent"></pre> </div> <script type="text/javascript"> var network; var nodes = new vis.DataSet(); var edges = new vis.DataSet(); var gephiImported; var nodeContent = document.getElementById('nodeContent'); var parserOptions = { edges: { inheritColors: false }, nodes: { fixed: true, parseColor: false } } var gephiJSON = loadJSON('../datasources/test.json', redrawAll, function(err) {console.log('error')}); var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { edges: { color: { inherit: false, } }, physics: { stabilization: false, } }; network = new vis.Network(container, data, options); /** * This function fills the DataSets. These DataSets will update the network. */ function redrawAll(gephiJSON) { nodes.clear(); edges.clear(); var parsed = vis.network.gephiParser.parseGephi(gephiJSON, parserOptions); // add the parsed data to the DataSets. nodes.add(parsed.nodes); edges.add(parsed.edges); console.log(parsed.edges) network.fit(); // zoom to fit } </script> </script> </body> </html>

Answer 1

Your JSON data structure looks like what vis.js expects.您的 JSON 数据结构看起来像 vis.js 所期望的那样。 Could it be that you are setting your edges color option 'inherit' to false?可能是您将边缘颜色选项“继承”设置为 false？ From the documentation example, it sets this field to 'from' for the edge options of the network, OR change the key to 'inheritColors' if you're adjusting the parser options: https://almende.github.io/vis/docs/network/edges.html;从文档示例中，它将此字段设置为 'from' 对于网络的边缘选项，或者如果您正在调整解析器选项，请将键更改为 'inheritColors'： https ://almende.github.io/vis/文档/网络/edges.html； https://almende.github.io/vis/docs/network/index.html?keywords=network (Control F for 'inheritColors') https://almende.github.io/vis/docs/network/index.html?keywords=network（'inheritColors ' 的 Control F）

从 json 导入时，vis.js 无法更改边缘颜色

问题描述

1 个解决方案

解决方案1
0 2020-08-25 02:39:29

从 json 导入时，vis.js 无法更改边缘颜色

问题描述

1 个解决方案

解决方案1 0 2020-08-25 02:39:29

解决方案1
0 2020-08-25 02:39:29