javascript - 两个网络图的比较

标签 javascript user-interface svg d3.js data-visualization

我有两个网络图,但将它们放在一起是比较小图的最简单方法。但是随着图表的增长,用户很难比较 View 。我想知道合并两个图形并显示比较的最佳方法。 enter image description here

在上图中可以看出,没有一个节点是相同的,但它们的链接方式不同。

我想知道如何呈现比较数据。

关于使用 d3.js 呈现此类比较的不同 View 的任何想法。

最佳答案

我建议不要尝试应用力布局或类似的方法来绘制图形(这会以类似于您问题图片中的方式绘制图形)。相反,我想建议对两个图都使用圆形布局(类似于和弦图):

enter image description here

这个视觉示例是为其他目的而制作的,但类似的原则可以应用于您的问题:

  • 将所有顶点等距布置在一个圆上(如果有一些顶点只属于两个图中的一个,可以将它们分组并标记不同的颜色)
  • 如果两个图中的两个顶点之间存在链接,请将它们连接成一种颜色(比如说绿色)
  • 如果仅在一个图中的两个顶点之间存在链接,则根据图(比如红色和紫色)​​以适当的颜色连接它们

此方法可以很好地适应顶点数量。

希望这对您有所帮助。

关于javascript - 两个网络图的比较,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24489838/

相关文章:

javascript - 如何在 JS 中创建采购订单表单

c++ - 如何仅使用 OpenCV HighGui 制作一个简单的一键式窗口?

java - 鼠标拖动绘制形状

javascript - 是否可以在没有回调函数的情况下从 setTimeout 返回一个值?

javascript - AJAX 以渐进的方式读取数据,而不仅仅是在完成时

HTML5 UI 框架

python - 使用 SVGWRITE 在 Python 中添加指向 SVG 元素的链接

linux - Linux 上的 SVG 到 SWF?

javascript - 停止 SVG 滚动动画反转

javascript - 如何让 Chrome 扩展程序在某个 url 上运行代码