Question

我试图创建一个图表，其中输入是圆圈列表（位置和半径）（或更好的椭圆），圆圈的重叠变为形状，并且可以应用鼠标悬停事件。我也希望圈子移到前面，并具有鼠标悬停效果，几乎与此类似

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

不需要知道重叠的大小。

我尝试过使用Ben Frederickson的D3.js Venn图表。虽然我无法理解一些图表（选择）功能，但我已经做到这样可以输入圆圈，并且绘制得很好，包括重叠，但这仍然依赖于＆＃ 39;数据＆＃39;作为输入，所有集合（在jsonp文件中看到）仍然是需要的。我意识到我可以制作一个脚本来列出所有可能的集合，但这是理想的。

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

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

干杯，瑞恩

Answer 1

每个交叉区域都有一个由venn.intersectionAreaPath＆＃39;为其计算的SVG路径。功能。它采用圆圈列表并返回交叉区域的路径元素。

如果您已经拥有圈子的位置，则可以覆盖＆＃39; layoutFunction＆＃39;维恩图对象的属性如：

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);

这仍然需要列出您想要绘制的所有可能区域（例如＆＃34; [{sets：[0]}，{sets：[1]}，{sets：[0,1]} ]＆＃34;），但这样您就不需要指定区域的大小。

D3.js分解重叠的形状

1 个答案: