D3.js打破重叠的形状

Question

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

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

重叠的大小并不需要知道。

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

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

我挣扎理解代码是如何创造这些重叠，然后将其分配给该组。

干杯，莱恩

Answer 1

每个交叉区域具有由“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]}]”），但是这样您不需要为区域指定大小。