jjzjj

javascript - 在 Vis.js 中设置缩放级别

coder 2024-07-30 原文

我有一个使用 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', shape: 'square'},
  {id: 8, label: 'Step 8', shape: 'square'},
  {id: 9, label: 'Step 9', shape: 'square'},
  {id: 10, label: 'Step 10', shape: 'square'},
  {id: 11, label: 'Step 11', shape: 'square'},
  {id: 12, x: width * 2, y: 1, label: 'Success!', shape: 'circle'}
];

// create some edges
var edges = [
  {from: 1, to: 2, style: 'arrow', color: 'red', width: 1, length: 200}, // individual length definition is possible
  {from: 2, to: 3, style: 'arrow', width: 1, length: 200},
  {from: 3, to: 4, style: 'arrow', width: 1, length: 200},
  {from: 4, to: 5, style: 'arrow', width: 1, length: 200},
  {from: 5, to: 6, style: 'arrow', width: 1, length: 200},
  {from: 6, to: 7, style: 'arrow', width: 1, length: 200},
  {from: 7, to: 8, style: 'arrow', width: 1, length: 200},
  {from: 8, to: 9, style: 'arrow', width: 1, length: 200},
  {from: 9, to: 10, style: 'arrow', width: 1, length: 200},
  {from: 10, to: 11, style: 'arrow', width: 1, length: 200},
  {from: 11, to: 12, style: 'arrow', width: 1, length: 200}
];

var testData = {
  nodes: nodes,
  edges: edges
};
var testOptions = {
        width: '100%'
};
var test = new vis.Network(testContainer, testData, testOptions);
}

最佳答案

您可以使用 fit、focus 和 moveTo 等函数更改缩放级别。

示例:https://visjs.github.io/vis-network/examples/network/other/animationShowcase.html

文档:https://visjs.github.io/vis-network/docs/network/

关于javascript - 在 Vis.js 中设置缩放级别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27450311/

中设javascript39widthlengthvisualizationvis.jsvis.js-networkchap-links-library

有关javascript - 在 Vis.js 中设置缩放级别的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby-on-rails - 如何在 Rails 中设置路由的默认格式？ - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式，每行不带“默认值”散列？谢谢。

  3. ruby-on-rails - environment.rb 中设置的常量在开发模式中消失 - 2

    了解Rails缓存如何工作的人可以真正帮助我。这是嵌套在Rails::Initializer.runblock中的代码:config.after_initializedoSomeClass.const_set'SOME_CONST','SOME_VAL'end现在，如果我运行script/server并发出请求，一切都很好。然而，在我的Rails应用程序的第二个请求中，一切都因单元化常量错误而变得糟糕。在生产模式下，我可以成功发出第二个请求，这意味着常量仍然存在。我已通过将以上内容更改为以下内容来解决问题:config.after_initializedorequire'some_cl

  4. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - faraday如何设置日志级别 - 2

    我最近将我的http客户端切换到faraday，一切都按预期工作。我有以下代码来创建连接:@connection=Faraday.new(:url=>base_url)do|faraday|faraday.useCustim::Middlewarefaraday.request:url_encoded#form-encodePOSTparamsfaraday.request:jsonfaraday.response:json,:content_type=>/\bjson$/faraday.response:loggerfaraday.adapterFaraday.default_ada

  6. ruby-on-rails - 如何在回形针 ruby​​ on rails 中设置默认图像 - 2

    最近我安装了Paperclipgem，我正在努力让默认图像在我的系统上工作，我将图像文件放在assets/images/pic.png中。这是我的模型User中的代码:has_attached_file:pic,:styles=>{:medium=>"300x300>",:thumb=>"100x100>"},:default_url=>'missing_:avatar.png'#:default_url=>'assets/images/avatar.png'has_attached_file:attach这是我的AddPicPaperClip迁移中的代码:defself.upadd_

  7. ruby-on-rails - Rails 中的类实例变量应该在互斥体中设置吗？ - 2

    假设我的Rails项目中有一个设置实例变量的Ruby类。classSomethingdefself.objects@objects||=begin#somelogicthatbuildsanarray,whichisultimatelystoredin@objectsendendend是否可以多次设置@objects？是否有可能在一个请求期间，在上面的begin/end之间执行代码时，可以在第二个请求期间调用此方法？我想这实际上归结为Rails服务器实例如何fork的问题。我应该改用Mutex还是线程同步？例如:classSomethingdefself.objectsreturn@o

  8. 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

  9. 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:

  10. 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

随机推荐