d3.js 相关问题

此代码适用于 JavaScript： var timeFormat = d3.timeFormat("%M:%S"); var yAxis = d3.axisLeft(y).tickFormat(timeFormat) 但是 TypeScript 中的这段代码不起作用： const yAxis = d3.axisLeft(y).

typescript d3.js

回答 3 投票 0

React 中的 D3 在从 useState 更新数据时出现问题

我正在使用 React 并开始使用 D3 创建气泡图。我们的主要思想是我们有一个 useState ，它随着数据的时间而变化。数据可能会发生三种情况：新的、...

reactjs svg d3.js bubble-chart

回答 1 投票 0

从鼠标（悬停）位置获取可观察图 x,y 数据值

问题：如何从可观察图中获取鼠标悬停点的 x/y 数据值？（或在手机上触摸。）背景：我正在尝试制作一个交互式时间线，例如...

javascript d3.js plot observable-plot

回答 1 投票 0

如何向 d3 图上的数据点添加文本？

我正在使用 d3 尝试创建一个线图，其中在线数据点之一上带有文本。这是我不成功的尝试的一个jsfiddle： https://jsfiddle.net/pz2afemd/ var y = [5,6,8,4]...

javascript d3.js

回答 1 投票 0

调整我的 d3 图表的大小，以便在页面加载和调整窗口大小时它为 100%

这个问题已经被问过很多次了，但这个答案似乎对我不起作用。我有以下小提琴，我为其添加了调整大小功能，如下所示： // 调整大小 var aspec...

javascript d3.js

回答 2 投票 0

Javascript d3js 中带圆角的路径

我想为一个角创建一个圆角边缘，用户可以在 D3js 中指定角的半径。我发现一篇文章有潜在的解决方案，但示例位于 Observable 笔记本中。我

javascript d3.js observable

回答 2 投票 0

带有国家/地区名称标签层的 D3 地球仪

我正在努力寻找任何以国家/地区名称作为标签层的 D3 地球仪（或 Globe-gl 等）示例。我本质上是在寻找这个演示 https://observablehq.com/@michael-keith/draggable...

d3.js webgl-globe d3-geo

回答 1 投票 0

d3 强制按可预测的顺序布局节点

每当您刷新此示例时，节点的顺序都会有所不同。如何才能使每次刷新时的顺序都相同？也许“子节点1”在顶部，然后与右侧相邻......

javascript d3.js force-layout

回答 2 投票 0

d3.js 地图 (<svg>) 自动适应父容器并随窗口调整大小

我正在构建一个仪表板并使用 d3.js 添加一个世界地图，该地图将根据地理位置实时绘制推文。 d3.json() 行中引用的 world.json 文件可在此处下载（它是

css canvas svg d3.js

回答 6 投票 0

d3 选择具有特定 CSS 类的所有内容

我正在尝试选择具有特定类别的所有元素。他们可能在这门课之前或之后有不同的课程，但只要他们有这门课，他们就应该被选择前任：我正在尝试选择具有特定类别的所有元素。他们可能在这堂课之前或之后有不同的课程，但只要他们有这堂课，他们就应该被选中例如： <g class="classa classb classc"> <g class="classq classr classz"> <g class="classd classb classe"> 我希望选择第一个和第三个元素，因为它们都位于classb下。有什么建议么？我以为d3.selectAll(".classb")会起作用，但事实并非如此。当您在 Web 开发中使用多个类时，请记住它们在类属性中用空格分隔。所以像这样 <g class="class_a class_b class_c"> <g class="class_z class_r class_z"> <g class="class_d class_b class_e"> 这就是您如何正确访问这些元素。一旦开始正确命名这些，您应该能够通过 CSS 选择它们。因此，类将是一个单词，并用空格（而不是逗号）分隔。然后尝试：d3.selectAll('.class_b') 类之间用空格分隔，而不是逗号！ <g class="classa classb classc"> <g class="classq classr classz"> <g class="classd classb classe"> 或者更好， <g class="class-a class-b class-c"> <g class="class-q class-r class-z"> <g class="class-d class-b class-e"> 选择器为 d3.selectAll(".class-b")。 svg 元素的类和选择与 html 元素相同。您对 d3.selectAll(".class b") 的选择将选择属于 <b> 类元素的子元素的所有 class 元素。

javascript css d3.js select

回答 2 投票 0

d3js - 未绘制多边形的geojson

我正在尝试使用 d3js 绘制地图（城市各区的多边形）。我得到的只是一个米色矩形。我正在尝试使用 d3js 绘制地图（城市各区的多边形）。我得到的只是一个米色矩形。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Lpgz crime rates</title> <script src="https://d3js.org/d3.v6.min.js"></script> <style> #map { width: 800px; height: 600px; border: 1px solid black; } .map path { stroke: #999; stroke-width: 0.5; } </style> </head> <body> <svg id="map" viewBox="0 0 800 600"></svg> <script> const width = 800; const height = 600; const margin = 20; const svg = d3.select('#map') .attr('width', width) .attr('height', height); Promise.all([ d3.json('data/Leipzig_ortsteile.geojson'), d3.json('data/crime_rates.json') ]).then(([ortsteile, crimeRates]) => { console.log("GeoJSON data:", ortsteile.features); console.log("Crime rates data:", crimeRates); const projection = d3.geoMercator() .fitSize([width, height], ortsteile); const pathGenerator = d3.geoPath().projection(projection); const colorScale = d3.scaleSequential(d3.interpolateReds) .domain([0, d3.max(Object.values(crimeRates))]); const paths = svg.selectAll('path') .data(ortsteile.features) .enter() .append('path') .attr('d', d => { const pathData = pathGenerator(d); console.log(`Path data for ${d.properties.Name}:`, pathData); return pathData; }) .attr('fill', d => { const rate = crimeRates[d.properties.Name]; console.log(`Area: ${d.properties.Name}, Crime rate: ${rate}`); return rate ? colorScale(rate) : '#ccc'; }) .attr('stroke', '#999') .attr('stroke-width', '0.5'); console.log("SVG Paths:", paths); }).catch(err => console.error("Error loading data:", err)); </script> </body> </html> 这是 geojson 内部的样子： { "type": "FeatureCollection", "name": "log_lat", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [ { "type": "Feature", "properties": { "FID": 0, "OT": "00", "Name": "Zentrum" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 12.37927526130802, 51.344360566287889 ], [ 12.379117566590359, 51.344399728002436 ], [ 12.378953533569369, 51. .... 我尝试了多种变化，包括以市中心的坐标为中心、更改大小......我没有收到任何错误，并且控制台的输出看起来不错（对我来说）。问题很复杂，你的代码在其他方面都很好。我很抱歉我的评论中包含了对 Mapshaper 的引用 - 该服务可以纠正缠绕，而 D3 要求它是不正确的。我将其包含在内是因为该服务是用户友好的，并且不需要任何代码（通常也对 D3 友好），就像其他两个经过验证的选项一样。但我以前从未使用过它。您的文件将在几乎所有其他映射/绘图框架中工作，因为这些框架将纬度经度视为平面。这样做的结果是缠绕顺序对于这些框架并不重要：对于多边形来说，外部始终是无界的部分，而内部是有界的。对于 D3，纬度经度位于地球上，因此不存在无界部分。整个屏幕的颜色与最后绘制的特征相同，覆盖了除所需区域之外的整个地球。因此 FitSize 适合整个地球。验证 geojson 是否正确缠绕的一个选项是手动设置投影以放大您感兴趣的区域并删除任何填充，您通常应该看到所有特征的轮廓（如果您的特征都是乱码，那么您还有另一个问题，您正在投影已经投影的数据）。下面我有一个使用 Turf 倒带的完整示例，意识到我链接的示例并不完整。 <html> <head> <script src=" https://cdn.jsdelivr.net/npm/@turf/[email protected]/turf.min.js "></script> <script src="https://d3js.org/d3.v6.min.js"></script> </head> <body> <script> d3.json("target.json").then(function(data) { var fixed = data.features.map(function(feature) { return turf.rewind(feature,{reverse:true}); }) data.features = fixed; d3.select("body").append("p") .text(JSON.stringify(fixed)); }) </script>

d3.js

回答 1 投票 0

D3orgChart 滚动时缩放

以下是添加按钮以放大和缩小图表的示例。在图表上滚动时我需要停止缩放。我怎样才能做到这一点？ https://stackblitz.com/edit/js-zd21e3?file=index.html 我尝试...

javascript d3.js d3-org-chart

回答 1 投票 0

类似网格的矩阵，兼容 d3.js 和行过渡效果

我有一个多行3列的网格设计。这些行代表类似文件夹结构的东西，即有一个父级和一些子级，他们也可以有一些子级，依此类推。活动...

html css d3.js css-grid

回答 1 投票 0

问题：在 d3.js 中将 SVG 下载为图像后，SVG 图像不可见

问题描述：我正在尝试创建一个包含从 URL（在本例中为 Unsplash）获取的图像的 SVG，并提供一个下载按钮以将 SVG 下载为图像 (PNG)。然而，一个...