javascript - 使用 d3.js 可视化数据组的数据技术

标签 javascript html d3.js data-visualization venn-diagram

我有一个应用程序和提供对这些应用程序的访问的服务器的列表,其中存在大量交叉,例如:

Servers 01-09 provide App A, App, B
Servers 05-09 provide App C
Servers 10-14 also provide App A

目前,我在一张纸上画了很多框,其中包含服务器及其应用程序的列表,这些框被分组为运行相同应用程序的服务器。使用上面的示例:一个标有 01-09 的框,内部写有应用程序 A 和应用程序 B,并与另一个标有 05-09 的框重叠,其中写有应用程序 C。

我想将其转换为 d3(我也在学习 d3)提供的可视化效果,以便在网站上展示。我想到了一种 super 维恩图之类的东西?目标是轻松查看运行相同应用程序的服务器组。

还有其他人遇到过这种可视化问题吗?您使用了哪些技术? d3 内置了哪些内容可以在此实例中使用?

最佳答案

对我来说,最简单的方法是在表格中,因为只有两个维度:

| Server | App A | App B | App C |
|--------------------------------|
| 01     |   X   |       |       |
| 02     |       |       |       |
etc

如果你选择 d3.js (相当合理),我会使用 Co-occurrence graph服务器垂直,应用程序水平。

或者,您可以尝试labelled force应用程序具有一种形状,服务器具有另一种形状。我认为这不如表格那么可读!

关于javascript - 使用 d3.js 可视化数据组的数据技术,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35842362/

相关文章:

javascript - HTML 5 视频播放器可以在模拟器中运行,但不能在实际设备上运行

javascript - 单击开关时如何在 2 个 div 之间平滑切换?

javascript - div的拉伸(stretch)背景

html - 我的 Css 类不适用于我的 html 文件

javascript - PhoneGap for iOS 中的通知

html - 如何删除 ul 和 li 之间的空格

javascript - 如何确保缩放不低于零并避免缩放点接触 y 轴和 z 轴? d3.zoom v4

svg - 需要D3 map 文件uState.js

javascript - d3 连接的串联圆

javascript - React/Preact .map 一个图标,点击后运行一个函数