javascript 使用 d3.js 的维恩图布局

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12545027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 16:28:51  来源:igfitidea点击:

Venn diagram layout with d3.js

javascriptpositiond3.jsdiagramvenn-diagram

提问by Yaron Naveh

Is there a sample on how to do Venn diagram using d3.js? I know about the twosamples:

是否有关于如何使用 d3.js 绘制维恩图的示例?我知道这两个样本

enter image description here

在此处输入图片说明

enter image description here

在此处输入图片说明

that are provided on D3 website. However they force me to calculate by myself the x.y position of the circles. I am hoping to feed just the data (circle sizes and overlap size) to a function/chart and it should do the layout for me.

D3网站上提供的。然而,他们强迫我自己计算圆圈的 xy 位置。我希望只将数据(圆圈大小和重叠大小)提供给函数/图表,它应该为我做布局。

采纳答案by mbostock

To get an understanding of the required algorithm, read Leland Wilkinson's paper, Exact and Approximate Area-proportional Circular Venn and Euler Diagrams, published in IEEE TVCG February 2012. To the best of my knowledge no one has yet implemented a venneulerlayout in D3, but that would make a fantastic D3 plugin.

要了解所需的算法,请阅读 Leland Wilkinson 的论文Exact and Approximate Area-proportional Circular Venn and Euler Diagrams,发表于 IEEE TVCG 2012 年 2 月。 据我所知,目前还没有人venneuler在 D3 中实现布局,但是这将是一个很棒的D3 插件

回答by fgborja

Venn Diagrams with D3.js

使用 D3.js 绘制维恩图

enter image description here

在此处输入图片说明

enter image description here

在此处输入图片说明

It is working fine.

它工作正常。