venn.js - JS图-不能复制示例代码
venn.js - JS图-不能复制示例代码
提问于 2019-02-20 03:42:43
我找到了一个很好的JS包，它可以生成Venn图。我正在尝试用一些新的值复制示例代码，但到目前为止我还没有成功。
博文：https://www.benfrederickson.com/venn-diagrams-with-d3.js/
Github：https://github.com/benfred/venn.js
示例：tooltip.html
我已经将我的代码简化到了下面的最低限度：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.venntooltip {
position: absolute;
text-align: center;
width: 128px;
height: 16px;
background: #333;
color: #ddd;
padding: 2px;
border: 0px;
border-radius: 8px;
opacity: 0;
}
</style>
</head>
<body>
<div id="venn"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://benfred.github.io/venn.js/venn.js"></script>
<script>
// define sets and set set intersections
var sets = [{ "sets": [0], "size": 3683, "label": "0 X" }, { "sets": [1], "size": 3650, "label": "1 X" }, { "sets": [2], "size": 4800, "label": "2 X" }, { "sets": [0, 2], "size": 866 }, { "sets": [1, 2], "size": 833 }, { "sets": [0, 1, 2], "size": 2817 }];
var chart = venn.VennDiagram().width(1024).height(1024);
var div = d3.select("#venn")
div.datum(sets).call(chart);
</script>
</body>
</html>我从这里得到的是一个简单的SVG，它有三个重叠的圆圈。
我假设我的var sets中有一些问题，但是我尝试了几个小时来对它进行了调整，但没有取得任何成功。
有人能告诉我我做错了什么吗？
回答 2
Stack Overflow用户
发布于 2019-02-20 08:24:16
我尝试了上面的代码，它在http服务器上运行得很好，但在jsFiddle中却不起作用。它可能是您的开发环境或浏览器。即使双击.html文件也会以chrome格式取出它，正确地显示SVG：
<svg width="1024" height="1024"><g class="venn-area venn-circle" data-venn-sets="0"><path d="
M 807.1589756762538 512
m -201.8410243237462 0
a 201.8410243237462 201.8410243237462 0 1 0 403.6820486474924 0
a 201.8410243237462 201.8410243237462 0 1 0 -403.6820486474924 0" style="fill-opacity: 0.25; fill: rgb(31, 119, 180);"></path><text class="label" text-anchor="middle" dy=".35em" x="876" y="511" style="fill: rgb(31, 119, 180);"><tspan x="876" y="511" dy="0.35em">0 X</tspan></text></g><g class="venn-area venn-circle" data-venn-sets="1"><path d="
M 215.93473308618636 512
m -200.93473308618638 0
a 200.93473308618638 200.93473308618638 0 1 0 401.86946617237277 0
a 200.93473308618638 200.93473308618638 0 1 0 -401.86946617237277 0" style="fill-opacity: 0.25; fill: rgb(255, 127, 14);"></path><text class="label" text-anchor="middle" dy=".35em" x="148" y="511" style="fill: rgb(255, 127, 14);"><tspan x="148" y="511" dy="0.35em">1 X</tspan></text></g><g class="venn-area venn-circle" data-venn-sets="2"><path d="
M 512.8582181751124 512
m -230.42479022003167 0
a 230.42479022003167 230.42479022003167 0 1 0 460.84958044006333 0
a 230.42479022003167 230.42479022003167 0 1 0 -460.84958044006333 0" style="fill-opacity: 0.25; fill: rgb(44, 160, 44);"></path><text class="label" text-anchor="middle" dy=".35em" x="511" y="397" style="fill: rgb(44, 160, 44);"><tspan x="511" y="397" dy="0.35em">2 X</tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="0_2"><path d="
M 681.000362208242 669.5557150594287
A 201.8410243237462 201.8410243237462 0 0 1 681.000362208242 354.44428494057126
A 230.42479022003167 230.42479022003167 0 0 1 681.000362208242 669.5557150594287" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="674" y="512" style="fill: rgb(68, 68, 68);"><tspan x="674" y="512" dy="0.35em"></tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="1_2"><path d="
M 342.9754402017427 667.6773127208855
A 230.42479022003167 230.42479022003167 0 0 1 342.9754402017427 356.32268727911446
A 200.93473308618638 200.93473308618638 0 0 1 342.9754402017427 667.6773127208855" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="349" y="512" style="fill: rgb(68, 68, 68);"><tspan x="349" y="512" dy="0.35em"></tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="0_1_2"><path d="M 0 0" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="0" y="-1000" style="fill: rgb(68, 68, 68);"><tspan x="0" y="-1000" dy="0.35em"></tspan></text></g></svg>几年前，我在生产中使用了这个精确的库--它很棘手。关键是要仔细看尺寸:数字。我们遇到的数据与足够的关系(在某些情况下)是不可能呈现一个venn。它会悄悄地出错，而不是呈现所有的关系。因此，我们放入了一个多填充，它将重新呈现(多个集)，直到显示所有关系为止。
你只是看到一个白色的屏幕？我要做的一件事是下载两个.js文件并在本地引用它们。这也许能起作用。检查控制台日志中是否有错误。Chrome DevTools可能会有所帮助。另外，我使用的服务器是来自npm的http-server。只要在任何目录中输入http-server，然后输入到.html的路径，它就会出现在http://localhost:8080/path/to/your/venn.html上。
希望这能有所帮助。
Stack Overflow用户
发布于 2019-02-21 03:03:34
尽管我不完全理解为什么，以下是我的解决方案。我需要添加一个额外的集合，它显式地定义了圆圈0和圈1重叠的事实。我也调整了“大小”的价值，只是为了让它更容易在精神上跟随。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.venntooltip {
position: absolute;
text-align: center;
width: 128px;
height: 16px;
background: #333;
color: #ddd;
padding: 2px;
border: 0px;
border-radius: 8px;
opacity: 0;
}
</style>
</head>
<body>
<div id="venn"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://benfred.github.io/venn.js/venn.js"></script>
<script>
// define sets and set set intersections
var sets = [
{ "sets": [0], "size": 100, "label": "0 X" },
{ "sets": [1], "size": 100, "label": "1 X" },
{ "sets": [2], "size": 100, "label": "2 X" },
{ "sets": [0, 1], "size": 50 },
{ "sets": [0, 2], "size": 50 },
{ "sets": [1, 2], "size": 50 },
{ "sets": [0, 1, 2], "size": 25 }];
var chart = venn.VennDiagram().width(1024).height(1024);
var div = d3.select("#venn")
div.datum(sets).call(chart);
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54778477
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号