程序员经验分享-hwhale

使用 D3.js 在曲线类型之间转换

2024-02-28

我想使用 D3.js 在曲线类型之间进行转换。

看一眼这个街区 https://bl.ocks.org/iaindillingham/67835c954c5e3a1fd00eed35a0b37765。数据保持不变，但曲线类型发生变化。我原以为路径能够保持其在平面上的大致位置——毕竟数据保持不变——但事实并非如此。路径似乎被重新绘制，尽管我不明白为什么在线性基础上，路径似乎是从左到右重新绘制的，而在线性基础上，路径似乎是从右到左重新绘制的。

我读过 Mike Bostock 的帖子路径转换 https://bost.ocks.org/mike/path/，但我认为这是一个略有不同的问题。在那里，数据发生变化，但曲线类型保持不变。此处，数据保持不变，但曲线类型发生变化。

预先感谢您的任何帮助！


要明白为什么你有这样的strange过渡，我们来比较一下d使用路径的属性curveBasis and a curveLinear.

首先，一个curveBasis:

d =“M0,101.2061594964L45.48756294826797,89.52282837400001C90.97512589653594,77.83949725160001,181.95025179307189,54.4728350 0680002,271.46268884480395,84.08731623460001C360.975125896536,113.70179746240001,449.0248741034641,196.2974221628,538.53731 11551961,222.09899531679994C628.0497482069281,247.90056847079998,719.0248741034642,216.90809007840002,764.512437051732,201。 4118508822 L810,185.915611686"

Now a curveLinear（相同数据）：

d =“M0,101.2061594964L272.92537768960784,31.10617276200003L537.0746223103922,278.89304686319997L810,185.915611686”

正如你所看到的，路径更简单curveLinear。因此，奇怪的转变是预期的行为。

一种可能的解决方案是使用路径插值，如中提出的这段代码 https://bl.ocks.org/mbostock/3916621来自迈克·博斯托克。

这是带有路径插值的块：http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772 http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772

PS：如果您想在加载页面时避免出现奇怪的过渡（所有路径都来自左上角），请第一次使用常规绘制它们attr method.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

d3js

使用 D3.js 在曲线类型之间转换 的相关文章

  • 如何从 d3 导入子模块以轻松创建图例？

    我对 JavaScript 和 D3 比较陌生 所以请记住这一点 我创建了一个可视化来显示仓库中特定位置的访问频率 并希望使用连续色标添加图例 我看过几个街区 可能会想出一些离题的东西 但是我遇到了this https observable

  • 如何同时使用 2 个范围滑块？

    我想使用 2 个范围滑块同时根据年龄和身高过滤表中的数据 我已经使用以下方法实现了 2 个范围滑块 年龄和身高 d3 slider js https github com MasterMaps d3 slider and a dc data

  • 从 csv 更新数据时，d3 在 setInterval 上闪烁文本

    我是 d3 的新人 学习了很多东西 我在更新从 csv 文件获取的数据时遇到了一些问题 我使用 setInterval 每秒更新数据 当它删除并再次插入数据时 它会闪烁几毫秒 表消失并生成新表 我究竟做错了什么 我怎样才能消除闪烁 感谢您的

  • D3.js 如何将我的真实数据合并到饼图中

    我是 D3 和数据可视化的新手 在加载真实数据时遇到一些问题 您将在以下部分中找到我的代码 现在我有一些数据存储在数组中 现在我想做的是将数据库中的实际数据存储到饼图中 另外 如果我这样做 var mydata d3 json mydata

  • D3：打字机风格的文本过渡

    In this jsfiddle http jsfiddle net VividD QbysN 标签通过减小旧文本的字体 然后增加新文本的字体 从一个文本过渡到另一个文本 但是 我希望新文本以 打字机 方式出现 就像这样jsfiddle h

  • 在三角形内强制图表 d3.js

    我正在研究 d3 js 力图 我有一个问题 是否可以在具有某些坐标的三角形内制作力图 这是我的代码 var width 500 var height 500 margin var marginLeft 10 var marginTop 10

  • 调整小倍数迷你图

    我有一个热图 显示一些数据和热图每行的迷你图 如果用户单击行标签 则数据按降序排列 因此每个矩形都会放置在正确的位置 反之亦然 如果用户单击列标签 每个反应都以正确的方式放置 但我无法放置迷你图 这是代码 http plnkr co edi

  • 如何使用 jQuery 循环 JSON 文件

    我正在尝试循环下面的 JSON 文件 statements subject A predicate B object C subject D predicate E object F 正如您所看到的 有两个主语 两个谓语和两个宾语 例如 我

  • R/d3heatmap/shiny - 有没有办法在 d3 工具提示中嵌入图像？

    我想在滚动单元格时在 d3 工具提示中嵌入图像 而不是默认的行 列 值数据 library shiny library d3heatmap ui lt shinyUI fluidPage titlePanel Old Faithful Ge

  • 分层边缘捆绑：添加父组标签

    我对 HTML 和 JavaScript 还很陌生 我面临着著名的分层边缘捆绑可用here https bl ocks org mbostock 7607999 由 D3 js 库生成 My goal is to add a semi ci

  • 矩形相当于文本的文本锚点表示属性吗？

    是否有一个与文本的文本锚点表示属性等效的矩形 我希望能够从左侧 右侧或根据情况定位矩形 我知道这可以通过一些简单的计算来完成 但我只是想知道是否已经存在内置的东西 文本锚点演示属性上的链接 https developer mozilla o

  • 使用 d3 在两个节点之间绘制多条边

    我一直在关注 Mike Bostock 的代码这个例子 http bl ocks org 1153292学习如何在 d3 中绘制有向图 并且想知道如何构建代码 以便可以在图中的两个节点之间添加多个边 例如 如果上例中的数据集定义为 var

  • 寻找一种重构 D3.js 风格的方法链接模式的方法

    在学习 D3 js 时 我遇到了博客文章 http bost ocks org mike chart 解释其可重用代码单元背后的主要设计模式 我复制了下面的相关代码 下面呈现的模式的方式正是在 D3 代码库和插件中使用的方式 example

  • d3.js。带条的旋转地球仪

    我正在尝试创建带有像这样的酒吧的旋转地球仪这个例子 http data arts appspot com globe 你可以看我的例子here http jsfiddle net zeleniy jrh5xucs 一切都很顺利 直到酒吧超出

  • d3 (v4) 树布局和打字稿：类型“HierarchyNode”上不存在属性“x”

    我正在尝试在使用时使用正确的 ts 类型d3 hierarchy具有树布局的根 例如 interface MyCustomGraphType id string children MyCustomGraphType let treeData

  • Webpack 不包括 ProvidePlugins

    我正在开发一个小型试用 Web 应用程序 它使用 vue webpack 模板 https github com vuejs templates webpack https github com vuejs templates webpac

  • D3.js 中的点图

    我有兴趣创建一个Dot plot 每个数据值都有连续的点 但到目前为止我所管理的是为每个值创建一个点 更清楚地说 假设对于 array1 我希望第一个值创建 5 个圆圈 第二个值创建 4 个圆圈 依此类推 array1 5 4 2 0 3

  • 如何使用 d3.v4 中的 JSON 数据创建树布局 - 不使用 stratify()

    我正在尝试将一些 d3 代码从 v3 更新到版本 4 我有一个使用 JSON 数据的树形图 d3 v4 示例展示了如何使用 stratify 将表格数据 例如flare csv 转换为分层数据https bl ocks org mbosto

  • D3.js分组条形图

    I am making a bar chart using D3 js like this source statcan gc ca http www statcan gc ca pub 12 593 x 2007001 figures f

  • 将任何 D3.js 图表与 DC.js 集成

    我试图弄清楚如何轻松地将任何 D3 js 图表与 DC js 库集成 以便在所有图表之间使用交叉过滤功能 我也确实理解以前曾问过这种性质的问题 添加链接以供参考 DC js 监听图表组渲染 https stackoverflow com q

随机推荐

  • 使用 EF6.x.x Code First 而不进行迁移的缺点

    我厌倦了使用 运行Add Migration and Update Database因为很多时候我们忘记在生产数据库上运行迁移 因此 我们决定从数据库表中删除所有迁移以及所有迁移类 那么 如果我的 MigrationHistory 表始终为

  • 什么是“HDFS 写入管道”？

    当我阅读 hadoop 权威指南时 我坚持以下句子 写入reduce输出确实会消耗网络带宽 但仅作为 与普通 HDFS 写入管道消耗的量差不多 问题 1 能帮我更详细地理解上面这句话吗 2 HDFS写入管道 是什么意思 当文件写入 HDFS

  • Python 为 S3 Post 生成签名

    我想我已经阅读了几乎所有有关浏览器内基于表单的 S3 签名的 Base 64 编码的内容 旧文档和新文档 例如 http doc s3 amazonaws com proposals post html http doc s3 amazon

  • 如何在Python中读取fasta文件？

    我正在尝试读取 FASTA 文件 然后找到特定的主题 字符串 https en wikipedia org wiki Sequence motif并打印出它发生的顺序和次数 AFASTA文件 https en wikipedia org w

  • 如何使用 Ajax 使用 VS 2012 Internet 模板更新 RenderBody() 部分？

    我看过一些 Ajax 可用于更新 div 或其他具有 id 元素的示例 我无法找到使用 Ajax 和 Razor 视图的示例来帮助我完成以下任务 我的页面是顶部的标准菜单 中间的正文和页脚 并不需要每次都更新页眉和页脚 事实上 我的页面只需

  • SyncConfiguration 已弃用，SyncUser.configuration() 的正确用法是什么？

    我开始从 Realm 收到以下警告 init user realmURL enableSSLValidation isPartial urlPrefix 已弃用 使用 SyncUser configuration 代替 我明白警告的意思 但

  • Elasticsearch 中的 PIT 成本如何？

    我知道scrollElasticsearch 有很多开销 而且search after一般是首选 但是 PIT 时间点 呢 它也有相同的开销吗 Is search after仍然比 PIT 快吗 Since 个人所得税杠杆search af

  • NetBeans Android 插件出错

    我目前正在开发一个 Android 应用程序 并且使用 Netbeans 6 9 1 和 nbandroid 1 0 beta 我已经安装了 Android SDK 并配置了所有内容 但是当我创建一个简单的项目并尝试构建它时出现错误 Cre

  • 如何丢弃在睡眠功能期间传递的用户输入？

    我正在尝试使用终端创建游戏 我询问玩家是否准备好 然后使用下面的代码进行倒计时 问题在于用户所做的所有输入都会添加到程序所做的下一个输入查询中 我正在寻找一种方法来丢弃以前的输入或在此函数期间完全阻止它 我可以做一个 getchar 循环

  • 使用 python 连接字节列表

    我正在尝试开发一个工具来读取二进制文件 进行一些更改并保存它 我想做的是列出文件中的每一行 处理几行 然后再次加入该列表 这是我尝试过的 file open myFile exe r b aList for line in f aList

  • php mysqli 准备语句选择

    尝试让一个函数能够为任何表创建带有多个参数的简单 CRUD 选择 我认为我已经完成了最难的部分 但现在无法获取数据 也许我做错了什么我无法弄清楚 我准备好的语句函数 function prepared query mysqli sql pa

  • emacs 不备份 git repo 中的文件

    emacs不创建文件内的备份git存储库 我希望保存它们 因为我经常依靠它们在将更改提交到git repo 我正在使用xemacs直到最近 它总是会创建通常的 第一次保存时的文件 但emacs如果在 a 内工作则不会执行此操作git项目 在

  • 从 jenkins 运行 selenium testNG 时，chrome 不会最大化

    我在跑步时遇到问题 硒测试NG 来自 jenkins 的测试 问题是我正在登录我的应用程序并检查一些元素可见性 当我直接从批处理文件运行测试时 我取得了成功 因为我将我的 google chrome 驱动程序设置为最大化使用 driver

  • 如何使用整理器按属性排序？ （爪哇）

    我使用Java 我想使用 Collat or 按属性对对象的子列表进行排序 以便按字母顺序排序但忽略重音符号 问题是我尝试了不同的方法 但没有任何效果 这会对子列表进行排序 但不会忽略重音符号 newList subList 0 5 sor

  • Mapfile 作为 MapReduce 作业的输入

    我最近开始使用 Hadoop 在使用 Mapfile 作为 MapReduce 作业的输入时遇到问题 以下工作代码在 hdfs 中编写一个名为 TestMap 的简单 MapFile 其中包含三个 Text 类型的键和三个 BytesWri

  • Gradle 5 和 IntelliJ 2018.3。无法识别的选项：--add-opens 或 java.base.java.lang=ALL-UNNAMED

    我有一组由 Gradle 4 10 3 构建的复杂项目 我可以从命令行构建它们 但也可以将它们导入 IntelliJ 2018 3 Ultimate 不会出现重大问题 当我将 Gradle 升级到 5 1 1 时 项目仍然可以从控制台正常构

  • Perl Windows IPv6

    我有一个使用 TCP IP 套接字的 Perl Windows 应用程序 我需要添加 IPv6 支持 我有一台 Windows 7 64 位计算机 它运行带有 Hurricane Electric 隧道的 IPv6 它的得分为 10 分 满

  • 如何在 Github 中为 Makefile 保留选项卡

    Github 自动将制表符转换为多个空格 所以 每次我创建一个Makefile在 Github 中 我需要在我的 Linux 盒子中克隆存储库并编辑Makefile using vim进而push将更改返回到我的 Github 存储库以避免

  • 具有透明背景的 JavaFX 按钮

    我有一些经典Button在 JavaFX 中 带有一个包含一些文本的框 我需要没有那个框的按钮 只需要文本 当我悬停按钮或用鼠标单击按钮时 它会将其颜色更改为不同的颜色 在 JavaFX 中 样式是通过使用 CSS 来完成的 button

  • 使用 D3.js 在曲线类型之间转换

    我想使用 D3 js 在曲线类型之间进行转换 看一眼这个街区 https bl ocks org iaindillingham 67835c954c5e3a1fd00eed35a0b37765 数据保持不变 但曲线类型发生变化 我原以为路径

热门标签