d3.js 相关问题

我尝试将正确的类型添加到我的 d3.select 语句中，以便设置 mySVG 变量。函数应用程序（）{ const [mySVG, setMySVG] = useState 我正在尝试将正确的类型添加到我的 d3.select 语句中，以便设置 mySVG 变量。 function App() { const [mySVG, setMySVG] = useState<d3.Selection<d3.BaseType, unknown, HTMLElement, any>>() const svgRef = useRef<SVGSVGElement | null>(null) useEffect(() => { setMySVG(d3.select(svgRef.current)); }, []) return ( <svg ref= {svgRef}> </svg> ); } 目前，我在代码中得到了下面的错误突出显示： setMySVG(d3.select(svgRef.current)); 选择指定的节点元素。第一个通用“GElement”指的是要选择的元素的类型。第二个通用“OldDatum”是指所选元素上的基准类型。当重新选择具有先前设置的已知基准类型的元素时，这非常有用。 @param node — 要选择的元素 “Selection”类型的参数不可分配给“SetStateAction”类型的参数 |未定义>'。类型“Selection”不可分配给类型“Selection”。 “select(...).select(...).select(...).data”的类型在这些类型之间不兼容。类型 '{ (): 未定义[]; （数据：NewDatum[] | 可迭代，键？：d3.ValueFn | 未定义）：d3.Selection<...>； |未定义）：d3.Selection<...>；我已经通过将类型替换为 any 来使其工作，但我希望能够分配正确的关联类型。要使用 D3 选择 SVG 元素并为“mySVG”分配正确的 TypeScript 类型，您可以对代码进行以下修改：从 D3 导入必要的类型（“Selection”和“BaseType”）更新“mySVG”的状态定义以允许“null”值作为初始状态，并指定正确的类型。在“useEffect”中，在尝试使用 D3 选择“svgRef.current”之前检查“svgRef.current”是否不为空。这有助于防止空引用错误。 import { Selection, BaseType } from 'd3'; function App() { const [mySVG, setMySVG] = useState<Selection<SVGSVGElement | null, unknown, HTMLElement, any> | null>(null); const svgRef = useRef<SVGSVGElement | null>(null); useEffect(() => { if (svgRef.current) { setMySVG(d3.select<SVGSVGElement, unknown>(svgRef.current)); } }, []); return ( <svg ref={svgRef}> {/* Your SVG content here */} </svg> ); }

javascript reactjs typescript d3.js react-hooks

回答 1 投票 0

在 D3 中创建指向的哈希模式

我正在 D3 中创建一个图表。要求之一是我有一个矩形，它可以指向左侧或右侧，并且该矩形内应该有一个散列模式。这是ea...

javascript d3.js

回答 1 投票 0

如何处理D3中数据差异较大的情况

我是 D3 的新手，正在学习如何制作条形图。我的数据集范围很大。数据集 = [12, 15, 60, 10000, 70000, 90000, 0.0002] 我正在根据该数据集制作一个条形图，它看起来......

d3.js

回答 1 投票 0

vue + d3 svg 未显示

我正在尝试复制此处提供的示例图表（可缩放圆形包装）。我正在使用以下版本将其部署在 vue 应用程序中 "vue": "^2.6.14&...