javascript - TypeError:this.querySelectorAll 在 react js 中使用 D3Funnel 时不是函数
问题描述
我在我的反应应用程序(基于打字稿)中使用d3funnelTypeError: 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)
解决方案
您需要在初始化时传递ref.current
给D3Funnel
它,并将数据和选项作为绘图函数的参数。
- 这是解决方案
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>;
}
推荐阅读
- python - Python 向 PHP 发送信息
- python - 在特定条件下修改字符串
- webview - 如何在 webview 中禁用 Audiofocus?
- python - 如何使用 pandas 转换表格
- python - PyGame 游标卡在中间循环遍历中
- math - Ehrenfest Urn 模型是否具有马尔可夫属性和独立增量
- python - 降低这个 Django 查询集解析函数的时间复杂度
- javascript - vuejs(3) 从一个自变化的类更新视图
- javascript - Javascript - 访问 JSON 对象的嵌套元素
- asp.net - 迷失为 SPA 配置 IdentityServer4