d3.js相关内容

使用 d3.text 时避免数据缓存

我正在使用 d3.text() 加载文本文件.我想避免使用浏览器的缓存.有谁知道如何做到这一点?谢谢! 解决方案 不知道 MIME 类型会如何解决这个问题. 您可以通过在 url 后附加一个随机数来避免缓存(这是与 d3 无关的一般做法).所以,如果你的网址是 var url = 'http://www.example.com/somthing'; 然后提出您的要求 ..
发布时间:2021-12-18 19:49:16 其他开发

D3 力布局:链接和节点 --- z-index(?)

D3:节点和链接之间的问题 我创建了以下 jsfiddle 以了解我想要实现的目标: 我希望节点超过(?)链接... 请帮帮我.我为我的英语感到抱歉 :) 脚本如下所示: function myGraph(el) {this.addNode = 函数(id){节点.push({"id": id });更新();}this.removeNode = 函数(id){变量 i ..
发布时间:2021-12-18 19:49:04 其他开发

“未捕获的引用错误:未定义 DOM"

我理解这行 D3 代码,它将一个 SVG 元素添加到 HTML 页面的正文中,并将对新元素的引用存储在变量“svg"中: var svg = d3.select('body').append('svg').attr('width', 500).attr('height',50); 例如,在 Scott Murray 的《Web 交互式数据可视化》一书中使用,第二版 此处.最近我看到了这种模式: ..
发布时间:2021-12-18 19:48:56 前端开发

在两个颜色值之间创建动态 d3 色标

我有一个带有颜色函数的 d3 饼图: var color = d3.scale.ordinal().range(['#0075B4', '#70B5DC']); 如果只有两个值/件,这有效.但如果有更多,我想在给定的两个之间选择颜色. 上面,有 3 个馅饼,标有“Cost 3"的馅饼的颜色介于 #0075B4 和 #70B5DC 之间. 这可以用 d3 实现吗?这是迄今为止我所拥有 ..
发布时间:2021-12-18 19:48:50 其他开发

d3 v6 指针功能未针对缩放和平移进行调整

我正在将我的应用程序从 d3 v5 升级到 v6,并且在迁移 d3.mouse 功能时遇到了问题.在我的应用程序中,我将变换应用于顶级 svg 组并使用缩放功能进行缩放和平移(缩放和平移).当我双击屏幕时,我会占据鼠标位置并绘制一个正方形. 现在我用 d3.pointer 替换 d3.mouse 函数.在我的双击事件中,我通过调用 d3.pointer(event) 来获取鼠标位置.但是,此 ..
发布时间:2021-12-18 19:48:39 其他开发

防止 D3 饼图中的文本重叠

我一直在谷歌上搜索,但我似乎无法理解这一点. 我的情况是,饼图上显示的国家/地区重叠: 这是正在发生的事情的一个例子: jsfiddle 我是 D3 的初学者,我正在努力防止文本重叠.有没有像我可以添加的文本边距属性,这样我的标签就不会相互重叠? 解决方案 更新:查看如果有足够的空间,D3 将弧形标签放在饼图中以获得更全面的解决方案. 我不知道放置文本元素以使 ..
发布时间:2021-12-18 19:48:28 前端开发

使用 d3 过渡增加和减少圆的半径

我正在尝试通过增加和减少圆的半径来在圆上创建脉冲效果.我希望圆圈根据给定的数据集增长和缩小.我只能得到以太增加或减少半径的过渡函数,但不能同时得到. d3 自动为数组中的每个值创建一个不同的圆.我怎样才能使一个圆的半径在它遍历数组时增长和缩小?到目前为止,我所拥有的一个简单版本如下.感谢您提供的任何帮助. 数据集 = [30, 80, 150, 90, 20, 200, 180]var s ..
发布时间:2021-12-18 19:48:18 前端开发

如何在 svg 上监听键盘事件

我有一个 svg,我可以在这个 svg 上绘制多个形状.现在我的要求是我想听键盘事件,如 ctrl+C、ctrl+V、ctrl+D、Esc、Delete,以便我可以复制、粘贴、复制选定的形状.但我不知道在 SVG 上监听键盘事件.我尝试了以下代码,但没有成功! mySVG.on("keydown", function () {//处理keydown的代码}); 有什么帮助吗?提前致谢. ..
发布时间:2021-12-18 19:48:06 前端开发

格式化Y轴值,原始数字以百万为单位,只想显示前三位

我的 Y 轴(每个国家/地区)的数据以百万为单位: {日期:“1960",德国:“72542990",西班牙:“30327000",法国:“46621166",意大利:“50025500"} 我如何在 Y 轴变量上编写 .tickFormat(d3.format("")); 以格式化刻度值,以便它们显示在 Y 轴刻度中,如下所示:0、2000万、4000万、6000万、8000万 目前它 ..
发布时间:2021-12-18 19:47:58 其他开发

d3.data 跳过第一行数据

我有以下代码效果很好,除了当我遍历我的数据集时,第一行(0 索引)被跳过了. svg.selectAll("rect").data(数据).进入().append("rect").attr("x",function(d){控制台日志(数据);控制台日志(d);返回 xScale(d.year-1980);}) 注意 console.log(data) 返回我的完整数据集,包括第一行,所以数据在 ..
发布时间:2021-12-18 19:47:50 其他开发

如何将 d3.svg.axis 限制为整数标签?

有没有可能限制图形上显示的 d3.svg.axis 整数标签的数量?以这张图为例.这里只有 5 种尺寸:[0, 1, 2, 3, 4].但是,.5, 1.5, 2.5 和 3.5 也会显示刻度. 解决方案 您应该能够使用 d3.format 而不是为此编写自己的格式函数. d3.svg.axis().tickFormat(d3.format("d")); 您还可以在刻度上使用 tick ..
发布时间:2021-12-18 19:47:39 前端开发

如何在D3中画棋盘?

我想在 D3 中画一个棋盘: 我对能够绘制初始游戏位置(如上)感到满意. 可能不需要国王、王后、骑士等的图像文件(有 12 个不同的部分),因为它们都是 Unicode 作为代码点 2654-265F: Unicode 字符出现在任何现代浏览器中: ♔♕♖♗♘♙ ♚♛♜♝♞♟ 维基百科上的 Unicode 国际象棋符号:这里 使用 Unicode 字符在终 ..
发布时间:2021-12-18 19:47:31 前端开发

javascript 检查文件是否存在

我有以下使用 D3.js 加载 json 数据的代码: this.clickCountry = function(d) {“严格使用"var time_for_remove = 500,time_for_zoom = 900d3.selectAll("svg g").transition().delay(time_for_remove + time_for_zoom - 200).remove( ..
发布时间:2021-12-18 19:47:21 前端开发

d3 圆标题工具提示文本的换行符

我正在使用 d3 的 svg,当圆标题的 tooltipText 为“line1\nline2"时,该行不会分成 2,而只是显示原始文本“line1\nline2". 尝试在工具提示中添加换行符和使用d3.js时可以在文本中插入换行符吗?,但不工作 有没有办法让它显示 2 行而不是 1 行原始文本? 即\n 被解释了.我认为更改后端响应无济于事,因为这是表示层的错误. 非常 ..
发布时间:2021-12-18 19:47:13 前端开发

条形图上的酒窝js直线y轴

我正在尝试在凹痕 js 条形图上绘制平均值、高值和低值直线.我不知道如何在 y 轴(成本)上将它们绘制为穿过条形的直线.这是将高、低和平均值保存到需要在图表上绘制的相应变量中的小提琴.有什么解决办法吗?jsfiddle 链接:http://jsfiddle.net/Ra2xS/14/ var dim = {"width":590,"height":450};//图表容器宽度var data = ..
发布时间:2021-12-18 19:47:06 前端开发

将 json 中的文本分成几行以在 D3 强制布局中显示标签

我对 d3.js 和一般的编码不熟悉.这是我的问题: 我正在尝试找到一种方法来打破行中强制布局对象的长显示名称. 我希望能够确定在哪里打破这些行,我猜这是可以从 json 文件中完成的事情. 我知道已经有人问过类似的问题,但我就是找不到代码放在哪里,或者为什么我之前的尝试没有成功.这是我拥有的代码: var 宽度 = 960,高度 = 800,根;var force = d3. ..
发布时间:2021-12-18 19:46:58 前端开发

流星,在哪里放 d3 代码?

我使用meteor、iron-router 和d3.d3用于根据我在iron-router的数据函数中计算的数据反应性地显示饼图.所以,我想让 d3 在 dom 到位时运行. 但是,我不知道应该将 d3 代码放在哪里.我曾经把它放在我生成数据的数据函数中.但是,有时在 dom 未准备好时计算 data 函数(因此 d3 无法绘制图表). 我想在 dom 完全渲染后运行 d3,并且该函数 ..
发布时间:2021-12-18 19:46:49 其他开发

D3 带背景的勾号

D3 轴如何tick 有背景颜色? 一种粗暴的方法是在每个 g.tick 中附加一个 rect 元素并在其上添加一个 fill,但它是很难实现,因为 rect 必须与 tick 中的文本大小相同.. 这是 Mike Bostock(和 另一个带图) 我截取了屏幕截图并标记了(红色边框)我希望刻度线具有背景颜色的位置: 有谁知道在 Ticks 上设置背景颜色的任何明智方法?谢 ..
发布时间:2021-12-18 19:46:39 其他开发

如何在 d3.js 中制作带有圆角和扩展网格的条形图?

我正在尝试使用 D3.js 创建条形图.条件是 Bar 应该有固定的宽度和 bar 之间的 padding,并且它应该绘制在网格线的中心. 工具提示应该在点击时出现一条垂直线 我能够创建带有绘制条的网格线,不知何故 rx,ry 从两侧四舍五入.我怎样才能达到同样的结果. var rectCluster = svg.selectAll(".bar").数据(数据);矩形簇.enter( ..
发布时间:2021-12-18 19:46:29 前端开发

使用 PNG 制作类似 D3 的力导向图

我一直在尝试使 D3 像 Force-Directed Graph(例如:https://bl.ocks.org/mbostock/4062045)和 PNG(意味着点应该是图片). 这是一个视觉创意: 我尝试的另一种方法是将每个图形元素映射到 parallax.js (http://matthew.js).begerfield.com/parallax/) 并在每个图形元素的中心之间 ..
发布时间:2021-12-18 19:46:20 前端开发