JavaScript库显示维恩图

#1 楼

venn.js

GitHub：https://github.com/benfred/venn.js

它使用D3.js作为底层图形库。

1。指定并绘制集合

→在线查看

// Code taken from the GitHub repository, the license specified there applies.

// define sets and set set intersections
var sets = [{label: "A", size: 10}, {label: "B", size: 10}],
    overlaps = [{sets: [0,1], size: 2}];

// get positions for each set
sets = venn.venn(sets, overlaps);

// draw the diagram in the 'simple_example' div
venn.drawD3Diagram(d3.select(".simple_example"), sets, 300, 300);

2。设置颜色集

我还没有尝试选择自定义颜色，但是很有可能。

您还可以随意设置交集区域的样式：http：//benfred.github。 io / venn.js / examples / intersection_tooltip.html

3。标签集

请参见第一个示例。

奖金4.标签相交区域

据我所知，这是不可能的。 （我必须承认，我没有完全阅读文档和代码。）

注1

在某些情况下，圆的布局无法正确设置。在某些情况下，切换到多维缩放算法可能会解决这些问题：http://benfred.github.io/venn.js/examples/mds.html

但是，我也遇到了其他问题布局失败是由于圆的比例缩放导致的情况。您可能想阅读作者的博客文章，这些文章涉及绘制维恩图时遇到的问题： .js /
http://www.benfrederickson.com/multiDimension-scaling/
http://www.benfrederickson.com/calculating-the-intersection-of-3-or-more-circles /

注2

Venn.js要求您构建重叠部分并自行设置。如果有人对输入{1;2;3} ∩ {2;3}的功能感兴趣，那么我已经编写了一个小型库来执行此操作。也许将来我将代码放在GitHub上。

#2 楼

Github：https://github.com/lafarer/d3-venn
演示：http://bl.ocks.org/lafarer/0f7677bdfa6c3ab7f6c3

您可以指定集合和区域（交叉点） ），配色方案；它支持鼠标事件和选择。它最多可以使用7套。

免责声明：我是d3插件的作者