草庐IT

javascript - vis.js - 手动放置节点

coder 2024-05-17 原文

如何在 vis.js 中设置节点的位置？

我想手动定位至少一个节点。

我知道一个节点有选项x 和y。我设置了两者，还尝试了 layout 选项的变体(randomSeed、improvedLayout、hierarchical)，节点是从来没有放在我设置的地方。

这是我定义的简单网络:

  nodes = new vis.DataSet([
    {id: 1,  shape: 'circularImage', image: DIR + '1_circle', label:"1", x: 200, y: 100},
    {id: 2,  shape: 'circularImage', image: DIR + '2_circle', label:"2"},
    {id: 3,  shape: 'circularImage', image: DIR + '3_circle', label:"3"},
  ]);

  edges = [
    {id: "01-03", from: 1, to: 3, length: 300, label: '1 - 3'},
    {id: "02-03", from: 2, to: 3},
  ];

  var container = document.getElementById('graphcontainer');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    nodes: {
      borderWidth: 4,
      size: 30,
      color: {
        border: '#222222',
        background: '#666666'
      },
      font:{
        color:'#000000'
      }
    },
    edges: {
      color: 'lightgray'
    },
    //layout: {randomSeed:0}
    //layout: {hierarchical: true}
    layout: {
      randomSeed: undefined,
      improvedLayout:true,
      hierarchical: {
        enabled:false,
        levelSeparation: 150,
        direction: 'UD',   // UD, DU, LR, RL
        sortMethod: 'hubsize' // hubsize, directed
      }
    }
  };
  network = new vis.Network(container, data, options);

节点被放置了，但是不是我设置的那个点(200,100)，而是另一个位置。

我还没有找到在 vis.js 页面上明确设置节点位置的示例。有人可以提供一个吗？谢谢!

最佳答案

您确实可以通过设置节点的 x 和 y 属性为节点设置固定位置，是的，此功能有效且未损坏。

节点的x 和y 位置并不是指屏幕上以像素为单位的位置，而是网络坐标系中的固定位置。当您在网络中移动和缩放时，固定的项目也会移动和缩放，但它们将始终保持相对于彼此的相同位置。这就像你的家乡在地球上有一个固定的位置(经度、纬度)，但你仍然可以在谷歌地图中缩放和移动你的城镇。

编辑:为了达到你想要的效果，你可以修复缩放和移动，并调整视口(viewport)使其与 HTML Canvas 的像素相匹配，这是一个演示:

// create an array with nodes
var nodes = new vis.DataSet([
    {id: 1, label: 'x=200, y=200', x: 200, y: 200},
    {id: 2, label: 'node 2', x: 0, y: 0},
    {id: 3, label: 'node 3', x: 0, y: 400},
    {id: 4, label: 'node 4', x: 400, y: 400},
    {id: 5, label: 'node 5', x: 400, y: 0}
]);

// create an array with edges
var edges = new vis.DataSet([
    {from: 1, to: 2, label: 'to x=0, y=0'},
    {from: 1, to: 3, label: 'to x=0, y=400'},
    {from: 1, to: 4, label: 'to x=400, y=400'},
    {from: 1, to: 5, label: 'to x=400, y=0'}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var width = 400;
var height = 400;
var options = {
    width: width + 'px',
    height: height + 'px',
    nodes: {
        shape: 'dot'
    },
    edges: {
        smooth: false
    },
    physics: false,
    interaction: {
        dragNodes: false,// do not allow dragging nodes
        zoomView: false, // do not allow zooming
        dragView: false  // do not allow dragging
    }
};
var network = new vis.Network(container, data, options);
  
// Set the coordinate system of Network such that it exactly
// matches the actual pixels of the HTML canvas on screen
// this must correspond with the width and height set for
// the networks container element.
network.moveTo({
    position: {x: 0, y: 0},
    offset: {x: -width/2, y: -height/2},
    scale: 1,
})
#mynetwork {
    border: 1px solid black;
    background: white;
    display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css" rel="stylesheet" type="text/css" />

<p>The following network has a fixed scale and position, such that the networks viewport exactly matches the pixels of the HTML canvas.</p>
<div id="mynetwork"></div>

关于javascript - vis.js - 手动放置节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32902720/

javascriptvis39strongcodevis.jsvis.js-network

有关javascript - vis.js - 手动放置节点的更多相关文章

  1. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  4. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

  7. 区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2

    文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具，用来对区块链系统进行各种管理操作。但是对于初学者来说，还是可视化界面更友好，本节就来介绍WeBASE管理平台，这是一款微众银行开源的自研区块链中间件平台，可以降低区块链使用的门槛，大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行，在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设，一定

  8. ruby - 选择包含子节点内文本的父节点 - 2

    基本上我想选择一个节点(div)，其中它的子节点(h1,b,h3)包含指定的文本。Childtext1Childtext2...Childtext3我期待的是/html/div/而不是/html/div/h1我在下面有这个，但不幸的是返回了child，而不是div的xpath。expression="//div[contains(text(),'Childtext1')]"doc.xpath(expression)我期待的是/html/div/而不是/html/div/h1那么有没有一种方法可以简单地使用xpath语法来做到这一点？ 最佳答案

  9. ruby-on-rails - 放置调试语句 - 2

    当我编写代码时，我非常频繁地使用“puts”语句进行调试。它允许我查看服务器中发生的情况。在调试代码的时候，不知道是什么原因，我把这些“puts”语句去掉了。这是个好主意还是我应该保留它们以使我的服务器日志更加清晰？ 最佳答案 您应该使用记录器而不是puts。使用这种语句:Rails.logger.debug"DEBUG:#{self.inspect}#{caller(0).first}"ifRails.logger.debug?如果您想(几乎)实时查看调试，只需在另一个终端窗口中使用tail命令:tail-Flog/develop

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐