草庐IT

javascript - 在 arbor.js(查询插件)中为边缘添加标签

coder 2024-07-29 原文

如何在 arbor.js 中为边缘添加标签 它是一个图形可视化库。

假设A和B是节点，E是边 一种粗略的方法是插入一个“文本节点” T 并加入 A-T 和 T-B

但是我不想这样，有没有其他办法？

这是示例代码

var theUI = {
  nodes:{A:{color:"red", shape:"dot", alpha:1}, 
      B:{color:"#b2b19d", shape:"dot", alpha:1}, 
      C:{color:"#b2b19d", shape:"dot", alpha:1}, 
      D:{color:"#b2b19d", shape:"dot", alpha:1},
  },
  edges:{
      A:{
          B:{length:.8},
          C:{length:.8},
          D:{length:.8}
           }
  }
}

var sys = arbor.ParticleSystem()
sys.parameters({stiffness:900, repulsion:2000, gravity:true, dt:0.015})
sys.renderer = Renderer("#sitemap")
sys.graft(theUI)

在此，A 连接到 B、C 和 D。 如何给边缘提供标签？

最佳答案

arbor.js 允许您编写代码来渲染整个图形。您可以在渲染方法中做任何您想做的事情，包括可以存储在单独 map 中的绘图边缘标题。

以这种方式重写渲染器中的渲染方法:

redraw:function()
{
    ctx.fillStyle = "white";
    ctx.fillRect (0,0, canvas.width, canvas.height);

    particleSystem.eachEdge (function (edge, pt1, pt2)
    {
        ctx.strokeStyle = "rgba(0,0,0, .333)";
        ctx.lineWidth = 1;
        ctx.beginPath ();
        ctx.moveTo (pt1.x, pt1.y);
        ctx.lineTo (pt2.x, pt2.y);
        ctx.stroke ();

        ctx.fillStyle = "black";
        ctx.font = 'italic 13px sans-serif';
        ctx.fillText (edge.data.name, (pt1.x + pt2.x) / 2, (pt1.y + pt2.y) / 2);

    });

    particleSystem.eachNode (function (node, pt)
    {
        var w = 10;
        ctx.fillStyle = "orange";
        ctx.fillRect (pt.x-w/2, pt.y-w/2, w,w);
        ctx.fillStyle = "black";
        ctx.font = 'italic 13px sans-serif';
        ctx.fillText (node.name, pt.x+8, pt.y+8);
    });       
   };

此代码期望在初始化时填充每条边的数据属性。

我使用我的自定义 map 和方法 addNode/addEdge 手动创建所有节点和边，但是我想您可以稍微更改您的代码以通过这种方式使用自定义数据初始化边:

var theUI = {
  nodes:{A:{color:"red", shape:"dot", alpha:1}, 
      B:{color:"#b2b19d", shape:"dot", alpha:1}, 
      C:{color:"#b2b19d", shape:"dot", alpha:1}, 
      D:{color:"#b2b19d", shape:"dot", alpha:1},
  },
  edges:{
      A:{
          B:{length:.8, data:{name:"A->B"}},
          C:{length:.8, data:{name:"A->C"}},
          D:{length:.8, data:{name:"A->D"}}
           }
  }
}

P.S.:看看this example , 我从中学到了很多东西。

关于javascript - 在 arbor.js(查询插件)中为边缘添加标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7499047/

javascriptarbor34ctxsectionjquery-pluginsarbor.js

有关javascript - 在 arbor.js(查询插件)中为边缘添加标签的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - ECONNRESET (Whois::ConnectionError) - 尝试在 Ruby 中查询 Whois 时出错 - 2

    我正在用Ruby编写一个简单的程序来检查域列表是否被占用。基本上它循环遍历列表，并使用以下函数进行检查。require'rubygems'require'whois'defcheck_domain(domain)c=Whois::Client.newc.query("google.com").available?end程序不断出错(即使我在google.com中进行硬编码)，并打印以下消息。鉴于该程序非常简单，我已经没有什么想法了-有什么建议吗？/Library/Ruby/Gems/1.8/gems/whois-2.0.2/lib/whois/server/adapters/base.

  3. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  4. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  5. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  6. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  7. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  8. ruby-on-rails - 在 Rails 和 ActiveRecord 中查询时忽略某些字段 - 2

    我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道，是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔？posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr

  9. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  10. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

随机推荐