React JS 中的维恩图答案

【问题标题】：Venn Diagram in React JSReact JS 中的维恩图
【发布时间】：2019-09-27 07:31:25
【问题描述】：

我正在使用 d3.js 在 react js 中创建维恩图。在尝试创建时，我使用 venn 模块。所以我使用下面的代码来启动目的

 var venn = require("venn");
 venn.create([1,2]);   
 console.log(venn);

在运行问题时出现以下错误

**Error: **define cannot be used indirect****


// Execute the module function
**modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));**

谁能建议我解决这个问题。

【问题讨论】：

你可以为它创建一个演示吗？很容易提供帮助。另外，在反应中，我们不做require，而是做import venn or {venn} from 'venn'; require 方式适用于节点应用程序。
我按照以下链接创建了一个 venn -:diagramhttps://www.npmjs.com/package/venn
您也可以只使用 png 图片，这里是所有 2set 和 3set 维恩图的集合：github.com/Ace-Cassidy/Venn-Diagram-Pictures

标签： reactjs d3.js react-router venn-diagram

【解决方案1】：

正如我在评论中提到的，您需要 import 它，而不是 requiring 它。 require 是 CommonJS 语法，通常在 NodeJS 中找到，而 react 没有。它使用 ES6 的import 语法。

你可以这样做：

导入它。

import venn from "venn";

在您的功能/类反应组件中使用它，如下所示：

let myVenn = venn.create([1, 2]);
console.log(m); // [1,2]

另外，这是我为您创建的simple demo。它工作得很好。检查右下角的控制台部分。

【讨论】：

【解决方案2】：

这对我有用：


import React, {useEffect, useState} from "react";
import * as d3 from "d3";
import * as venn from "venn.js";
export const VennDiagram = (props) => {

  const [sets, setSets] = useState([
    { sets: ["I"], size: 1000, label: "IMPORTANT: Plan" },
    { sets: ["U"], size: 200, label: "URGENT: Delegate Next" },
    { sets: ["S"], size: 1000, label: "FIT: Make Time" },
    { sets: ["I", "U"], size: 300, label: "Delegate Now" },
    { sets: ["S", "U"], size: 300, label: "Do Next" },
    { sets: ["S", "I"], size: 300, label: "Schedule" },
    { sets: ["S", "I", "U"], size: 80, label: "Do Now" }
  ]);
  useEffect(() => {

    let chart = venn.VennDiagram();
    d3.select("#venn").datum(sets).call(chart);
  }, [sets]);

  return (
    <div id="venn" style={{ textAlign: "center" }}>
    </div>
  );
};

【讨论】：

你能帮我缩小这个维恩图的宽度吗？也适用于圆圈宽度？
我想我必须使用维恩叉。 github.com/upsetjs/venn.js 这让你可以使用 viewBox。我认为我的类似于：let chart = venn.VennDiagram().useViewBox().height(300)