0

我正在尝试创建一个图表，其中输入是圆圈列表（位置和半径）（或更好的椭圆），圆圈的重叠变成形状，并且可以应用鼠标悬停事件。我也希望圆圈移到前面，并有鼠标悬停效果，几乎就像这样

http://benfred.github.io/venn.js/examples/intersection_tooltip.html

不需要知道重叠的大小。

我试过使用 Ben Frederickson 的 D3.js 维恩图。虽然我无法理解某些图表（选择）功能，但我已经做到了，以便可以输入圆圈，并且绘制得很好，包括重叠，但这仍然依赖于将“数据”作为输入同样，所有集合（在 jsonp 文件中可见）仍然是必需的。我意识到我可以编写一个脚本来列出所有可能的集合，但这是理想的。

http://www.benfrederickson.com/venn-diagrams-with-d3.js/

我正在努力理解代码如何创建这些重叠，然后将它们分配给集合。

干杯，瑞恩

4

1 回答 1

2

每个交叉区域都有一个由“venn.intersectionAreaPath”函数为其计算的 SVG 路径。它接受一个圆列表并返回交叉区域的路径元素。

如果您已经有了圆圈的位置，则可以覆盖维恩图对象上的“layoutFunction”属性，例如：

var circles = [{'x' : 0, 'y': 100, 'radius' : 80},
               {'x' : 0, 'y': 0, 'radius' : 90 },];
var chart = venn.VennDiagram().layoutFunction(function() { return circles; });
d3.select("#venn").datum([{sets: [0]}, {sets:[1]}, {sets:[0,1]}]).call(chart);

这仍然需要列出您希望绘制的所有可能区域的列表（例如“[{sets: [0]}, {sets:[1]}, {sets:[0,1]}]”），但这方式您不需要指定区域的大小。

于 2015-04-05T17:29:10.320 回答