javascript - venn.js - JS 维恩图 - 无法复制示例代码-6ren

javascript - venn.js - JS 维恩图 - 无法复制示例代码

转载作者：行者123 更新时间：2023-11-30 19:47:55

24

4

我找到了一个生成维恩图的不错的 JS 包。我正在尝试使用一些新值复制示例代码，但到目前为止我没有成功。

博文:https://www.benfrederickson.com/venn-diagrams-with-d3.js/

Github:https://github.com/benfred/venn.js

示例:http://benfred.github.io/venn.js/examples/intersection_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 有问题，但是我已经尝试调整它几个小时，但没有成功。

有人可以指出我做错了什么吗？

最佳答案

我试过你上面的代码，它在 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>

几年前我在生产中使用了这个库——这很棘手。关键是要仔细看大小:数字。我们遇到了具有足够关系的数据(在某些情况下)无法呈现维恩。它会悄悄地出错而不渲染所有关系。所以我们放入了一个 polyfill，它会重新渲染(多组)直到所有关系都显示出来。

您是否只是看到白屏？我要做的一件事是下载这两个 .js 文件并在本地引用它们。这可能会成功。检查您的控制台日志是否有错误。 Chrome DevTools 可能会有所帮助。另外，我使用的服务器是来自 npm 的 http-server。只需在任何目录中输入 http-server，然后输入 .html 的路径，它就会出现在 http://localhost:8080/path/to/your/venn.html 上。 .

希望对您有所帮助。

关于javascript - venn.js - JS 维恩图 - 无法复制示例代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54778477/

24

4

0

文章推荐： c# - DateTime toString() 的问题

文章推荐：在 awk 中调用将记录作为参数的 c 代码

文章推荐： c# - 从周数计算月份

IPv6 示例 Wireshark 示例
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Sample data for IPv6? 除了 wireshark 在其网站上提供的内容之外，是否有可以下
c# - WPF 中的多拖放——示例/示例/教程？
我正在寻找可以集成到现有应用程序中并使用多拖放功能的示例或任何现成的解决方案。我在互联网上找到的大多数解决方案在将多个项目从 ListBox 等控件拖放到另一个 ListBox 时效果不佳。谁能指出我
java - GATE Embedded 示例示例 NoClassFound 错误
我是 GATE Embedded 的新手，我尝试了简单的示例并得到了 NoClassDefFoundError。首先我会解释我尝试了什么在 D:\project\gate-7.0 中下载并提取 Ga
eclipse-rcp - Eclipse 中的 JFace 示例，如 SWT 示例？
是否有像 Eclipse 中的 SWT 示例那样的多合一 JFace 控件示例？搜索(在 stackoverflow.com 上使用谷歌搜索和搜索)对我没有帮助。如果它是一个独立的应用程序或 ecl
google-compute-engine - Google 计算引擎 .NET API 示例/示例/教程
我找不到任何可以清楚地解释如何通过 .net API(特别是 c#)使用谷歌计算引擎的内容。有没有人可以指点我什么？附言我知道 API 引用 ( https://developers.google.
基于Basicauth的一个C#示例
最近在做公司的一个项目时，客户需要我们定时获取他们矩阵系统的数据。在与客户进行对接时，提到他们的接口使用的目前不常用的BASIC 认证。天呢，它好不安全，容易被不法人监听，咋还在使用呀。但是没办法呀，
基于Basicauth的一个C#示例
最近在做公司的一个项目时，客户需要我们定时获取他们矩阵系统的数据。在与客户进行对接时，提到他们的接口使用的目前不常用的BASIC 认证。天呢，它好不安全，容易被不法人监听，咋还在使用呀。但是没办法呀，
YAML 示例
我正在尝试为我的应用程序设计配置文件格式并选择了 YAML。但是，这(显然)意味着我需要能够定义、解析和验证正确的 YAML 语法! 在配置文件中，必须有一个名为 widgets 的集合/序列。 .这
python - 示例
你能给我一个使用 pysmb 库连接到一些 samba 服务器的例子吗？我读过有类 smb.SMBConnection.SMBConnection(用户名、密码、my_name、remote_name
示例：iptables限制ssh链接服务器
linux服务器默认通过22端口用ssh协议登录，这种不安全。今天想做限制，即允许部分来源ip连接服务器。案例目标：通过iptables规则限制对linux服务器的登录。处理方法：编
Sonarqube PostProjectAnalysisTask 示例？
我一直在寻找任何 PostProjectAnalysisTask 工作代码示例，但没有看。 This页面指出 HipChat plugin使用这个钩子(Hook)，但在我看来它仍然使用遗留的 Po
GWT CustomScrollPanel 示例
我发现了 GWT 的 CustomScrollPanel 以及如何自定义滚动条，但我找不到任何示例或如何设置它。是否有任何示例显示正在使用的自定义滚动条？最佳答案这是自定义 native 滚动条的
Marionette CRUD 示例
我正在尝试开发一个 Backbone Marionette 应用程序，我需要知道如何以最佳方式执行 CRUD(创建、读取、更新和销毁)操作。我找不到任何解释这一点的资源(仅适用于 Backbone)。
Android BLE 示例
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题？通过 editing this post 添加详细信息并澄清问题. 去年关闭。 Improve this
将多个实例提交到数据库的表单的 Django 示例？
我需要一个提交多个单独请求的 django 表单，如果没有大量定制，我找不到如何做到这一点的示例。即，假设有一个汽车维修店使用的表格。该表格将列出商店能够进行的所有可能的维修，并且用户将选择他们想要进
spring - MultiTenantSpringLiquibase 示例。
我有一个 Multi-Tenancy 应用程序。然而，这个相同的应用程序有 liquibase。我需要在我的所有数据源中运行 liquibase，但是我不能使用这个 Bean。我的应用程序.yml
业务应用程序的 TDD 示例
我了解有关单元测试的一般思想，并已在系统中发生复杂交互的场景中使用它，但我仍然对所有这些原则结合在一起有疑问。我们被警告不要测试框架或数据库。好的 UI 设计不适合非人工测试。 MVC 框架不包括一
Clojure For Comprehension 示例
我正在使用 docjure并且它的 select-columns 函数需要一个列映射。我想获取所有列而无需手动指定。如何将以下内容生成为惰性无限向量序列 [:A :B :C :D :E ... :A
yii - findByAttributes 示例
$condition使用说明和 $param在 findByAttributes在 Yii 在大多数情况下，这就是我使用 findByAttributes 的方式 Person::model()->f
未启用 qtcreator 示例
我在 Ubuntu 11.10 上安装了 qtcreator sudo apt-get install qtcreator 安装的版本有:QT Creator 2.2.1、QT 4.7.3 当我启动

首页

博学

6Ren·AI

商城

javascript - venn.js - JS 维恩图 - 无法复制示例代码