javascript - 在 React js 中使用 D3Funnel 时，TypeError : this. querySelectorAll 不是函数

Question

我正在使用 d3funnel在我的 react 应用程序(基于 typescript )中，我不断收到错误 TypeError: this.querySelectorAll is not a function .而且，我不明白为什么会这样。这是我的示例代码:

import * as React from 'react'
import * as D3Funnel from 'd3-funnel'
import * as d3 from "d3";

const FunnelChart: React.FC = () => {

    const Ref = React.useRef(null)
    var data = [
        ['Applicants', 267 , '#1e4684', '#1e4684'],
        ['Interviews', 134,  '#1e4684'],
        ['Assessments', 48,  '#1e4684'],
        ['Hired',26,  '#1e4684']
    ];

    var options = {
        width : 200,
        height : 400,
        bottomWidth : 1/2,
        bottomPinch : 0,      // How many sections to pinch
        isCurved : true,     // Whether the funnel is curved
        curveHeight : 10,     // The curvature amount
        fillType : "gradient",   // Either "solid" or "gradient"
        isInverted : false,   // Whether the funnel is inverted
        hoverEffects : true,  // Whether the funnel has effects on hover
        fontSize : '18px'
    };

    
    React.useEffect(() => {
        var funnel = new D3Funnel( data, options );
        funnel.draw (d3.select(Ref.current));
    }, [])

        
        

    return (
        <>
            <div ref = {Ref}>
            </div>
        </>
    )
   } `

我真的很感激任何帮助。

编辑:这是错误:

react-dom.development.min.js:1 Uncaught TypeError: this.querySelectorAll is not a function at Array.__webpack_exports__.default (d3-funnel.js?f3d7:2417) at Selection.eval [as selectAll] (d3-funnel.js?f3d7:2395) at D3Funnel.destroy (d3-funnel.js?f3d7:194) at D3Funnel.draw (d3-funnel.js?f3d7:217) at eval (index.tsx?21e5:57) at Sg (react-dom.development.min.js:1) at Eg (react-dom.development.min.js:1) at HTMLUnknownElement.e (react-dom.development.min.js:1) at at g (react-dom.development.min.js:1) 

Answer 1

您需要通过ref.current至 D3Funnel同时初始化它和 data & option 作为 draw 函数的参数。

这是solution

import React, { useRef, useEffect } from "react";
import D3Funnel from "d3-funnel";

export default function App() {
  const chartRef = useRef(null);
  var data = [
    { label: "Teal", value: 12000, backgroundColor: "#008080" },
    { label: "Byzantium", value: 4000, backgroundColor: "#702963" },
    { label: "Persimmon", value: 2500, backgroundColor: "#ff634d" },
    { label: "Azure", value: 1500, backgroundColor: "#007fff" }
  ];

  var options = {
    width: 200,
    height: 400,
    bottomWidth: 1 / 2,
    bottomPinch: 2, // How many sections to pinch
    isCurved: true, // Whether the funnel is curved
    curveHeight: 10, // The curvature amount
    fillType: "gradient", // Either "solid" or "gradient"
    isInverted: true, // Whether the funnel is inverted
    hoverEffects: true, // Whether the funnel has effects on hover
    fontSize: "18px",
    label: {
      format: "{l}\n{f}"
    }
  };

  useEffect(() => {
    const chart = new D3Funnel(chartRef.current);
    console.log(chart);
    chart.draw(data, options);
  }, []);
  return <div className="App" ref={chartRef}></div>;
}