d3 выдает мне ошибку TypeError: невозможно прочитать свойство '__data__', равное null - PullRequest
Новая
       24

d3 выдает мне ошибку TypeError: невозможно прочитать свойство '__data__', равное null

0 голосов
/ 09 мая 2020

Я пишу код в reactjs. Я намерен построить диаграмму Венна, я решил использовать библиотеку venn. js (которая использует диаграмму из d3). venn. js записывается в js, поэтому я перемещаю его из js в reactJS.

Однако, когда я запускаю код, я получаю следующую ошибку:

TypeError: не удается прочитать свойство ' data ' нулевого Selection.datum node_modules / d3-selection /src/selection/datum.js:2

   1 | export default function(value) {
 > 2 |   return arguments.length
   3 |       ? this.property("__data__", value)
   4 |       : this.node().__data__;
   5 | }

Ниже вы найдете мой код 

import React, {useEffect, useState} from "react";
import * as d3 from "d3";
import * as venn from "venn.js";

export default function VennDiagram (props) {

  var sets = [{sets : [0], label : 'SE', size : 28,}, 
            {sets : [1], label : 'Treat', size: 35},
            {sets : [2], label : 'Anti-CCP', size : 108}, 
            {sets : [3], label : 'DAS28', size:106},
            {sets : [0,1], size:1},
            {sets : [0,2], size:1},
            {sets : [0,3], size:14},
            {sets : [1,2], size:6},
            {sets : [1,3], size:0},
            {sets : [2,3], size:1},
            {sets : [0,2,3], size:1},
            {sets : [0,1,2], size:0},
            {sets : [0,1,3], size:0},
            {sets : [1,2,3], size:0},
            {sets : [0,1,2,3], size:0}
            ];

  var chart = venn.VennDiagram()
                             .width(500)
                             .height(500)
                             .fontSize("24px");

            sets.sort(function(a,b) { return a.size - b.size; })
            d3.select("#rings").datum(sets).call(chart);
            var colours = ['black', 'red', 'blue', 'green'];

            d3.selectAll("#rings .venn-circle path")
                .style("fill-opacity", 0)
                .style("stroke-width", 10)
                .style("stroke-opacity", .5)
                .style("fill", function(d,i) { return colours[i]; })
                .style("stroke", function(d,i) { return colours[i]; });

            d3.selectAll("#rings .venn-circle text")
                .style("fill", function(d,i) { return colours[i]})
                .style("font-weight", "100");

            d3.selectAll("#rings .venn-circle")
                .on("mouseover", function(d, i) {
                    var node = d3.select(this).transition();
                    node.select("path").style("fill-opacity", .2);
                    node.select("text").style("font-weight", "100")
                                       .style("font-size", "36px");
                })
                .on("mouseout", function(d, i) {
                    var node = d3.select(this).transition();
                    node.select("path").style("fill-opacity", 0);
                    node.select("text").style("font-weight", "100")
                                       .style("font-size", "24px");
                                      });

  useEffect(() => {

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

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

Кто-нибудь смог решить эту проблему?

Спасибо

...