Venn Diagram in React JS

Question

I am using d3.js to create venn diagram in react js. While trying to create I use venn module. So I used below code for starting purpose

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

While running the problem am getting following error

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


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

could anyone suggest me to resolve this issue.

can you please create a demo for it? would be easy to help. Also, in react, we don't do `require` rather we do `import venn or {venn} from 'venn';` The `require` way is for node app. — Saqib, Sep 27 '19 at 07:41
I followed following links to create a venn -:diagramhttps://www.npmjs.com/package/venn — Shankar Nanda, Sep 27 '19 at 08:05
You can also just use png images, here's a collection of all 2set and 3set venn diagrams: https://github.com/Ace-Cassidy/Venn-Diagram-Pictures — Ace.C, Jun 08 '20 at 17:08

score 0 · Answer 1 · answered Sep 28 '19 at 09:19

As I mentioned in the comment, you need to import it, instead of requiring it. require is a CommonJS syntax, usually found in NodeJS while react doesn't have that. It uses import syntax of ES6.

Here is what you can do:

Import it.

import venn from "venn";

Use it inside your functional/class react component like this:

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

Also, here's a simple demo I have created for you. It works perfectly fine. Check the console section at the bottom right.

score 0 · Answer 2 · answered Feb 20 '20 at 15:21

This worked for me:


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

Could you please help me to reduce the width of this venn diagram ? also for circles width? — Vasu Kuncham, Aug 10 '20 at 02:54
I think I had to use a fork of venn. https://github.com/upsetjs/venn.js This lets you use viewBox. I think mine is something like: `let chart = venn.VennDiagram().useViewBox().height(300)` — ShadyAmoeba, Aug 13 '20 at 01:31

Venn Diagram in React JS

2 Answers2

Linked