javascript - 我应该使用哪种可视化来显示组合？

Question

我需要创建一个可视化/图表，显示从一组项目中进行选择的所有方法(即可能组合的数量)

具体来说，我展示了两只动物的潜在后代，其中每只 parent 可能拥有一定数量的基因，而后代继承了每种类型的 0 个、1 个或两个亲本基因。这些基因有有趣的名字(例如，火)，有时这些基因的组合有自己的名字(火 + 粉彩 = Firebug )，但这不是重点。

这是一个简单的示例，显示了来自 parent 的 2 和 2 个基因(共享 1 个)，这使得 2^2 = 16 种可能性。

当前的 UI 显示了可能性的列表，但没有任何东西可以直观地传达其大小。其次，如果具有共同性(即包含相同基因)的结果可以在视觉上相关，那就太好了。

我的想法有点像菱形图或分层网络，顶部是所有基因都被选中的结果，下面是一排 N-1 的节点，依此类推，直到最后一行有已选择 0 个。边将连接具有共享基因的层之间的节点。节点的大小可以表示概率。像这样(但忽略数据):

我知道 Punnett Squares ，但我不确定它是否适合此顺序的组合(因为它不会组合等效结果)。

我希望 d3js 有这样的东西，但在画廊中的大量示例中我没有看到任何类似的东西。

谢谢!

Answer 1

The current UI shows the list of possibilities, but nothing visually conveys the magnitude.

而不是用分数注释每种可能性 - 例如“1/16”——在您的可能性旁边放置一个水平条形图，其中条形的大小与该可能性的可能性成正比。您也可以通过降低可能性对可能性进行排序。