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&...

vue.js d3.js

回答 1 投票 0

D3 条形图可在单击按钮时更改数据源，但在按下按钮之前不会显示条形上的鼠标悬停工具提示

var 数据1 = [ { 组：“A”，值：4 }， { 组：“B”，值：16 }， { 组：“C”，值：8 } ]; 变量数据2 = [ { 组：“A”，值：7 }， { 组：“B”，值：1 ...

javascript d3.js

回答 1 投票 0

React/D3.js - 密度图 - 错误：<path> 属性 d：预期数字，“M10，NaNL12，NaNC14，Na…”

我被要求使用 D3.js 在 React 中实现密度图，但我的图在屏幕上没有显示任何内容。我对图表和数据可视化不太熟悉，所以我很挣扎。

javascript reactjs d3.js visualization density-plot

回答 1 投票 0

为什么我的折线图在D3.js中显示是这样的？

我想使用d3.js显示温度和湿度曲线，但是我的代码运行时显示了这个错误的折线图，为什么会有黑色区域？我的代码有什么问题吗？有人能帮我吗？欣赏...

javascript html d3.js linechart

回答 1 投票 0

Plotly.js 添加标记会向 x 轴添加填充

有没有办法阻止 Plotly 在向折线图添加标记时更改 x 轴上的填充。请参阅下面的两个片段。唯一的区别是第 24 行，其中“lines”是 chan...

javascript d3.js plotly

回答 3 投票 0

我不知道为什么地图无法加载

所以，老师要求我们编写一个 d3 程序，绘制英国地图并根据给定的提要绘制城镇，我编写了代码，但地图无法加载。我使用 d3js 但我只得到重新加载按钮...

javascript d3.js geojson

回答 1 投票 0

我正在尝试使用 d3js 进行缩放和平移。我附上了下面的代码。我正在使用 d3js v6。缩放当前无法使用佐...</desc> <question vote="1"> <p>我正在尝试使用 d3js 进行缩放和平移。我附上了下面的代码。我正在使用 d3js v6。目前缩放功能无法使用</p> <pre><code><!DOCTYPE html> <meta charset="utf-8"> <title>Zoom + Pan</title> <script src="https://d3js.org/d3.v6.min.js"></script> <style> .overlay { fill: none; pointer-events: all; } button { padding: 10px 20px; } </style> <body> <div id="buttons"> <button class="zooming" id="zoom_in">+</button> <button class="zooming" id="zoom_out">-</butto/*n> <button class="panning" id="pan_right">→</button> <button class="panning" id="pan_left">←</button> <button class="panning" id="pan_top">↓</button> <button class="panning" id="pan_top">↑</button> </div> <script> var width = 960, height = 500; var randomX = d3.randomNormal(width / 2, 80), randomY = d3.randomNormal(height / 2, 80); var data = d3.range(2000).map(function() { return [randomX(), randomY() ]; }); var zoom = d3.zoom().scaleExtent([1, 8]).translateExtent([ [ -1000, -500 ], [ 1000, 500 ] ]).on("zoom", zoomed); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .call(zoom) .append("g"); svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height); svg.selectAll("circle") .data(data) .enter().append("circle") .attr("r", 2.5) .attr("transform", function(d) { return "translate(" + d + ")"; }); function zoomed() { svg.attr("transform", "translate(" + [d3.zoomTransform(this).x,d3.zoomTransform(this).y] + ")" + "scale(" + d3.zoomTransform(this).k + ")" ); } async function interpolateZoom (translate, scale) { var self = this; await d3.transition().duration(350).tween("zoom", function () { var iTranslate = d3.interpolate([d3.zoomTransform(this).x,d3.zoomTransform(this).y], translate), iScale = d3.interpolate( d3.zoomTransform(this).k, scale); return function (t) { d3.zoomIdentity .scale(scale) .translate(translate); zoomed(); }; }); } function zoomClick() { var clicked = d3.event.target, direction = 1, factor = 0.2, target_zoom = 1, center = [width / 2, height / 2], extent = zoom.scaleExtent(), translate = zoom.translate(), translate0 = [], l = [], view = {x: translate[0], y: translate[1], k: zoom.scale()}; d3.event.preventDefault(); direction = (this.id === 'zoom_in') ? 1 : -1; target_zoom = zoom.scale() * (1 + factor * direction); if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; } translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k]; view.k = target_zoom; l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y]; view.x += center[0] - l[0]; view.y += center[1] - l[1]; interpolateZoom([view.x, view.y], view.k); } d3.selectAll('button').on('click', zoomClick); </script> </code></pre> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <meta charset="utf-8"> <title>Zoom + Pan</title> <script src="https://d3js.org/d3.v6.min.js"></script> <style> .overlay { fill: none; pointer-events: all; } button { padding: 10px 20px; } </style> <body> <div id="buttons"> <button class="zooming" id="zoom_in">+</button> <button class="zooming" id="zoom_out">-</butto/*n> <button class="panning" id="pan_right">→</button> <button class="panning" id="pan_left">←</button> <button class="panning" id="pan_top">↓</button> <button class="panning" id="pan_top">↑</button> </div> <script> var width = 960, height = 500; var randomX = d3.randomNormal(width / 2, 80), randomY = d3.randomNormal(height / 2, 80); var data = d3.range(2000).map(function() { return [randomX(), randomY() ]; }); var zoom = d3.zoom().scaleExtent([1, 8]).translateExtent([ [ -1000, -500 ], [ 1000, 500 ] ]).on("zoom", zoomed); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .call(zoom) .append("g"); svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height); svg.selectAll("circle") .data(data) .enter().append("circle") .attr("r", 2.5) .attr("transform", function(d) { return "translate(" + d + ")"; }); function zoomed() { svg.attr("transform", "translate(" + [d3.zoomTransform(this).x,d3.zoomTransform(this).y] + ")" + "scale(" + d3.zoomTransform(this).k + ")" ); } async function interpolateZoom (translate, scale) { var self = this; await d3.transition().duration(350).tween("zoom", function () { var iTranslate = d3.interpolate([d3.zoomTransform(this).x,d3.zoomTransform(this).y], translate), iScale = d3.interpolate( d3.zoomTransform(this).k, scale); return function (t) { d3.zoomIdentity .scale(scale) .translate(translate); zoomed(); }; }); } function zoomClick() { var clicked = d3.event.target, direction = 1, factor = 0.2, target_zoom = 1, center = [width / 2, height / 2], extent = zoom.scaleExtent(), translate = zoom.translate(), translate0 = [], l = [], view = {x: translate[0], y: translate[1], k: zoom.scale()}; d3.event.preventDefault(); direction = (this.id === 'zoom_in') ? 1 : -1; target_zoom = zoom.scale() * (1 + factor * direction); if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; } translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k]; view.k = target_zoom; l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y]; view.x += center[0] - l[0]; view.y += center[1] - l[1]; interpolateZoom([view.x, view.y], view.k); } d3.selectAll('button').on('click', zoomClick); </script></code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>您正在使用<strong>D3 V6</strong>。 <pre><code>d3.event.target</code></pre> 一直支持到 <strong>V5</strong>。从 <strong>V6</strong> 开始，使用事件作为回调函数的第一个参数传递：</p> <pre><code>function zoomClick(event) { const clicked = event.target; ... } ... d3.selectAll('button').on('click', zoomClick); </code></pre> </answer> </body></html>

d3.js

回答 0 投票 0

有没有办法将Assistant分配给基于D3.js的OrgChart中的节点？

我不熟悉 D3.js，不知道如何为组织图中的节点分配助理角色。有什么可能的机会吗？我正在尝试创建一个基于 D3.js 的组织结构图并且...

javascript html d3.js charts

回答 2 投票 0

markmap：将思维导图插入 HTML

我想在 Hugo 上使用思维导图，而 Markmap 正是我想要的。但我对其语法非常陌生。（参见下面的代码块）我什至不知道它是什么语言（是 typescript-arrow-

javascript svg d3.js hugo mindmap

回答 3 投票 0

d3.js 相关问题

最新问题