2

背景:我目前正在使用 JavaScript、jQueryBackbone.js(支持者需要这些)为 Web 应用程序开发客户端。
这是一个以图形模式(主要通过表示数据的交互式图表)可视化和编辑数据的应用程序。

术语:所述数据是多个文档的格式,每个文档包含一个项目列表
对于这个问题,让项目由标识符文本描述和指向其他文档中项目的链接组成。链接应该是对称的(i1 -> i2当且仅当i2 -> i1也存在时才存在)。

当前目标:在这个阶段,应用程序应该能够读取两个文档,并排显示两个列表,然后根据它们的链接绘制线条,连接两个文档之间的项目。
这些行应该是可编辑的。换句话说,用户应该能够创建新链接,或删除现有链接(反映项目模型上的更改)。

这些文档可能有点长,比如几十个项目(在现实场景中可能有几百个)。当然,页面将是可滚动的,以允许用户查看所有内容。

此外,为了方便用户,应该有一个滑块来缩放视图(允许放大/缩小效果,因此为用户提供了全局局部视图,后者更适合编辑,前者更适合分析)。
此外,应该允许用户隐藏特定项目(当项目有很多链接时很有用,创建视觉垃圾)。

我设法做到了:

  • 读取数据并将其映射到 Backbone 模型和集合;
  • 并排显示两个文档(主干视图),并带有项目连接;
  • 允许在这些连接上进行交互(拖放以创建线条,单击以删除),反映骨干模型的变化;
  • 隐藏特定项目;
  • 规模效应。

在遇到jsPlumb之后,我使用SVG实现了这一点。

手头的问题:应用程序仍然需要调整(强调缩放效果)。无论如何,我发现 jsPlumb 使用起来很舒服。但是,在使用滑块时,渲染性能似乎有些不足(可能是滑块步长太小,从而触发了太多事件)。

支持者建议我尝试使用桑基图来表示这种数据。他们还建议我尝试基于Raphaël.js的 tamc 的 Sankey。 当然,视觉因素也有贡献。

我的问题:这个库是否与 Backbone 有很好的兼容性?可能,如果我使用生成的 SVG 元素作为主干视图的元素。
另外,两者中的任何一个都比另一个具有显着的渲染性能优势吗?

最后一点,是否还有其他库更适合这种情况,值得花时间重写应用程序,我可能会向支持者建议?

4

1 回答 1

3

该项目正在进行中,我最终使用了 tamc 的 Sankey,我自己做了一些额外的工作,以更好地适应这种特殊情况。

在此处输入图像描述

于 2013-03-13T17:18:31.530 回答