标签: vis.js-network

vis.js Level sorting in Hierarchical Layout

I have a fairly simple hierarchical structure of nodes, but when vis.js draws them, the order of nodes on each level doesn't make much sense - there are a lot of crossed edges (screenshot: Default Layout )

I am hoping to get a layout similar to that given here: Expected Layout

My vis.js options are as follows;

{
    "layout": {
        "hierarchical": {
            "direction": "LR",
            "sortMethod": "directed",
            "nodeSpacing": 200,
            "treeSpacing": 400
        }
    },
    "edges": {
        "smooth": {
            "type": "continuous"
        }
    }, …

Run Code Online (Sandbox Code Playgroud)

javascript vis.js vis.js-network

nnx*_*xen

2018 02-07

7
推荐指数

1
解决办法

3663
查看次数

在Vis.js中设置缩放级别

我有一个网络,我正在使用vis.js构建,但它在宽度方面太大,无法放入页面的容器中.网络从左到右运行,包含有关特定进程的步骤.当一个人完成任务时,服务器会提供新的JSON记录来更新颜色.

由于布局,我无法更改容器大小.当网络加载时,它会导致字体非常小且不可读.有没有办法可以将缩放级别设置为一个选项,以便只显示该过程中的当前步骤？

function draw() {

test = null;

// create a network
var testContainer = document.getElementById('testing');

// create some nodes
var width = testing.clientWidth;

var nodes = [
  {id: 1, x: 0, y: 1, label: 'Start', color: 'green', shape: 'circle'},
  {id: 2, label: 'Step 2', shape: 'square'},
  {id: 3, label: 'Step 3', shape: 'square'},
  {id: 4, label: 'Step 4', shape: 'square'},
  {id: 5, label: 'Step 5', shape: 'square'},
  {id: 6, label: 'Step 6', shape: 'square'},
  {id: 7, label: 'Step 7', …

Run Code Online (Sandbox Code Playgroud)

javascript visualization chap-links-library vis.js vis.js-network

td-*_*dge

2018 03-05

6
推荐指数

1
解决办法

1万
查看次数

vis.js最小化交叉边缘

我是JavaScript的新手,并使用vis.js来构建分层("UD")网络.我有一个问题:同一级别的许多边缘交叉.

在vis.js中是否有一种方法可以最小化交叉边缘？在我的例子中,我有一个简单的树,根本不应该有交叉的边.

即我想要的东西代替

我的问题与Hierarchical Layout中的vis.js级别排序有关

这是我的vis.js选项:

var options = {
    edges: {
        smooth: {
            type: 'cubicBezier',
            roundness: 0.4
        }
    },
    layout: {
		improvedLayout: true,
        hierarchical: {
            direction: "UD"
        }
    },
    physics:false
};

Run Code Online (Sandbox Code Playgroud)

javascript vis.js vis.js-network

use*_*994

2018 02-17

6
推荐指数

1
解决办法

803
查看次数

使用 ReactJS 悬停时，Vis.js 节点工具提示不显示

你好，

在我的项目中，我使用 ReactJS 显示 vis.js 图，我希望显示的网络节点通过显示弹出窗口/工具提示对鼠标悬停事件做出反应。每个节点都有一个标题属性，这就是工具提示应该显示的内容。

这是他们在示例中的做法：

<!doctype html>
<html>
<head>
    <title>Network | Interaction events</title>
    <script type="text/javascript" src="../../../dist/vis.js"></script>
    <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
    <div id="mynetwork"></div>
    <script type="text/javascript">
        // create an array with nodes
        var nodes = new vis.DataSet([
            { id: 1, label: 'Node 1', title: 'I have a popup!' },
            { id: 2, label: 'Node 2', title: 'I have a popup!' },
            { id: …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs vis.js vis.js-network

ray*_*qin

2020 06-20

6
推荐指数

2
解决办法

3655
查看次数

Vis.js网络：如何在画布上单击添加节点？

vis.js的操作方法仅包括addNodeMode()，而不包括addNode()。我想知道是否有一些不错的方法可以在点击时创建节点。可能是通过操纵数据而不是网络本身？

当然，可能会去

network.on('click',function(params){
    if((params.nodes.length == 0) && (params.edges.length == 0)) {
        network.addNodeMode(); // doesn't add, one more click needed
        //# generate click in the same place. Use params.pointer.canvas
        //  or params.pointer.DOM to set appropriate coordinates
    }
})

Run Code Online (Sandbox Code Playgroud)

但是我们还必须防止无限循环，因为我们在点击处理程序中生成了一个点击事件。

javascript vis.js vis.js-network

Yak*_*ovL

lucky-day

6
推荐指数

2
解决办法

3459
查看次数