线性刻度的十字准线/x 值工具提示

2024-01-04

查看 d3noob 的这个块。

http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a

它最初是为日期格式的 x 轴设计的。而我的 x 轴和 y 轴都是线性的。我想做的是使用此工具提示样式来绘制带有趋势线的线性 x/线性 y 散点图。我希望这种工具提示/十字准线随着趋势线在我的图表中上升而沿着 x 轴值移动,就像上面块中的图表一样。实际上,在他的博客上,有人问了类似的问题,如何使其适用于序数尺度,但他回答说“这是未知的领域”。

所以我心想,哦,这并没有那么难。那是在我仔细查看代码之前,也是在我花几个小时调整这个那个之前。所以我现在对这件事有了更健康的尊重,它并不像看起来那么容易。

我认为将其更改为线性比例最复杂的部分如下:

function mousemove() {
            var x0 = x.invert(d3.mouse(this)[0]),
                i = bisectDate(data, x0, 1),
                d0 = data[i - 1],
                d1 = data[i],
                d = x0 - d0.date > d1.date - x0 ? d1 : d0;

有人可以发布在线性缩放 x 轴内工作的此工具提示块吗?我很想看看你是怎么做到的。我尝试了很多东西(徒劳),甚至是中点公式哈哈。事后看来,我意识到这是一个愚蠢的想法,但我真的对如何理解代码感到茫然。

任何图表都可以,只要它使用该工具提示即可。

感谢十亿,

仅供参考,我知道让某人为此创建要点/块可能是一项艰巨的任务,但我相信拥有一个功能示例块可以接触到许多人并让他们通过示例进行学习。此外,线性比例尺非常受欢迎,并且让此工具提示/十字线系统适用于此类比例尺将是社区的一个很好的补充。


你的意思是这样的吗?https://jsfiddle.net/gerardofurtado/ayta89cz/5/ https://jsfiddle.net/gerardofurtado/ayta89cz/5/

在这个小提琴中我只是使用d3.mouse()获取鼠标在透明矩形上的位置,并使用两条虚线作为十字线。您可以轻松地将这些值转换为相对的 x 尺度和 y 尺度值。我在这里对数学进行了硬编码,因为我知道刚刚创建的趋势线的斜率,但您必须根据趋势线修改数学。

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

线性刻度的十字准线/x 值工具提示 的相关文章

  • 如何在javascript中使用自动递增id?

  • 在 HTML TextArea 中设置(或读取)光标/插入符的值

    我正在尝试 但失败了 在 HTML 文本区域中实现拖放机制 使用 jQuery 或 Scriptaculous 我们都使用 拖放机制相对容易 因此我愿意接受使用这两者之一的答案 问题是 我似乎找不到读取或设置插入点的方法 我最终想要做的是确
  • 在原子操作中测试和递减?

    我刚刚发现了一个恼人的错误 它基本上是一个竞争条件 为了便于论证 我们假设一个非常简单的文档结构 例如 id XXX amount 100 集合中存在数百个这样的文档 并且由多个编写器访问 这些编写器有效地尝试将数量降低任何值 但绝不会低于
  • 使用过渡添加子项时 div 的平滑增长

    尽管使用了以下代码 但其行为并不符合我的预期transition所以可能有些事情我不明白 理想情况下 单击该按钮会将一个子项添加到id2div 并制作id1分区增长smoothly因此 function id1 button click g
  • 调整大小后获取实际图像大小

    我有一个充满缩略图的页面 用 css 调整大小150x150 当我单击缩略图时 页面变暗 并且图像以其真实尺寸显示 目前 我必须手动创建一个包含所有图像的实际高度的数组 为了解决设计问题 减少画廊的手动操作 我需要在调整图像大小 CSS 后
  • 0x800a1391 - JavaScript 运行时错误:“阶段”未定义

    我正在尝试做这个教程 http www sitepoint com creating a simple windows 8 game with javascript game basics createjsaseljs http www s
  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个
  • Vue 多个组件位于一个包/文件中

    假设我想创建一个 UI 包 如何将多个组件放入一个 JS 文件中 通常我会将不同的组件放在不同的文件中 import ButtonText from ButtonText vue import ButtonIcon from ButtonI
  • 更改 Angular 模型以更新 Kendo

    我一直在一个项目中使用 Angular 最近才发现 Kendo Angular 项目位于http kendo labs github io angular kendo http kendo labs github io angular ke
  • 解析 PHP 响应:未捕获的语法错误:意外的标记 <

    我正在使用 AJAX 来调用 PHP 脚本 我唯一需要从响应中解析的是脚本生成的随机 ID 问题是 PHP 脚本会引发许多错误 这些错误实际上很好 不会妨碍程序功能 唯一的问题是当我跑步时 parseJSON response I get
  • 在 WordPress 和 woocommerce 中禁用 zxcvbn.min.js

    如您所知 zxcvbn min js 约为 400kb 并且默认在 WordPress 网站中加载 我想知道如何阻止加载此 JavaScript 库 因为我不想在我的网站中检查密码长度 将以下内容添加到主题的 function php 或自
  • 谷歌地图API v3如何获取所有形状的坐标

    我有这个谷歌脚本 可以创建形状和删除形状 但没有太多关于保存形状的信息 我查了一下互联网 知道我可以通过 overlaycomplete 中的 getpaths 访问路径坐标 而且我还可以将坐标推入一个收集所有形状的数组中 但是 如果用户删
  • 如何从代码隐藏文件中的asp.net用户控件注册(调用)jQuery函数?

    如何从代码隐藏文件中的asp net用户控件注册 调用 jQuery函数 您可以使用ClientScriptManager RegisterStartupScript http msdn microsoft com en us librar
  • Node.js 连接 createServer 代码

    我正在阅读 Node js Connect 版本 2 15 0 Create a new connect server return Function api public function createServer function ap
  • iOS 11 getUserMedia 不起作用?

    苹果公司发表声明称getUserMedia将在 iOS 11 上完全正常运行 安装 iOS 11 Beta 版本 5 后 我确实收到一条消息 表明我的网站请求访问我的相机和麦克风 但似乎是这样的 video src window URL c
  • 使用js获取选择选项的onclick事件

    我有一个非常令人沮丧的问题 我有这个代码 它过滤掉我的结果并将它们输入到选择框中 var syn
  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j
  • 如何将字符串转换为 Javascript 中可执行的代码行?

    我有以下代码 console log I am var x console log Alive 现在我只想使用x执行分配给它的代码字符串 例如 我什至可能不知道 x 的值 但只是想执行它 这可能吗 eval https developer
  • 如何防止IE11弹出(您确定要离开此页面)

    我正在处理一个页面 除了一个下拉菜单可供选择外 我无需输入任何内容 但在 IE11 中 当我尝试转到下一页时 它会弹出该消息 我想阻止这种弹出的发生 所以我只是想知道 IE11 中弹出窗口的默认行为是什么 因为它不会出现在 Chrome 或
  • 如何在jsp页面中包含javascript

    我是 J2EE 和 Web 开发的新手 这是我的问题 我想在网页中包含 angular js 这是有效的版本 但我也想要一些本地的 javascript 文件 并且希望我想在本地目录中导入 angularjs

随机推荐

  • 如何将打开的窗体定位在 C# Windows 窗体中的特定位置?

    The Location窗体中的属性设置为 0 0 属性窗口 但是 该表单不会在指定位置打开 我错过了什么吗 你需要设置StartPosition手动使表单将起始位置设置为中的值Location财产 public Form1 Initial
  • 在 Python 中将字符串分配给 ID

    我正在使用 python 读取一个文本文件 其格式为每列中的值可以是数字或字符串 当这些值是字符串时 我需要分配该字符串的唯一 ID 在同一列下的所有字符串中都是唯一的 如果同一字符串出现在同一列下的其他位置 则必须分配相同的 ID 什么是
  • Retrofit 2 同步调用错误处理 4xx 错误

    我正在使用 android priority jobqueue 并使用改造来同步调用我的其余 api 但我不确定如何处理诸如 401 Unauthorized 错误之类的错误 我会发回 json 来说明错误 进行异步调用时很简单 但我正在调
  • htonl() 是否会更改 BIG ENDIAN 机器上的字节顺序?

    从字面上看 对 htonl 感到困惑 在很多链接中 我发现执行 htonl 的代码是 define HTONL n unsigned long n 0xFF lt lt 24 unsigned long n 0xFF00 lt lt 8 u
  • 在 MySQL 中插入十六进制值

    我使用 Java 创建了一个 SQL 数据库 我创建了一个表 其中有两列 第一列是一个递增的大整数 第二列我尝试将其定义为 char varchar 和二进制 但我仍然没有获得所需的功能 假设我尝试存储一个十六进制数字0a进入 char 列
  • 我如何判断我是否正在转发到复制构造函数?

    如果我正在编写一个将参数转发给构造函数的通用函数 有没有办法判断它是否是复制构造函数 本质上我想做的是 template
  • PyPdf不逐行读取pdf文本

    我正在使用 PyPdf 从 pdf 文件中读取文本 然而 pyPDF 不会逐行读取 pdf 中的文本 它以某种随意的方式读取 当 pdf 中不存在新行时 将新行放在某处 import PyPDF2 pdf path r C Users PD
  • 如何在.NET MAUI VISUAL STUDIOS 2022中使状态栏完全透明

    所以我发现你可以使用已弃用的代码来使 Android 上的状态栏完全透明 var s SystemUiFlags LayoutFullscreen SystemUiFlags LayoutStable FindViewById Androi
  • 在用户表单中选择图表

    我正在寻找编写一个宏 它从一个图表复制格式并将其应用到多个其他图表 我正在努力做的是确定一种方法来允许用户设置模板图表 然后选择多个其他图表 如果用户知道图表名称 则可以使用组合框来完成此操作 但我尝试在用户不知道图表名称的情况下执行此操作
  • 使用 Jest 测试承诺链

    我正在尝试用 Jest 测试承诺链序列 someChainPromisesMethod function async then async1 then async2 then result catch error 虽然测试单一承诺有很好的记
  • MongoDB Compass 与 WSL2 的问题

    我在 WSL2 内的容器内运行了一个 MongoDB 实例 当我尝试在浏览器中执行请求时localhost 27017即使它显示错误 它仍然可以工作 因为我尝试使用 HTTP 协议访问数据库 但是当我尝试使用主机名 localhost 和端
  • Monostate 是邪恶的 Singleton 的好表弟吗?

    Singleton 绝对是最被误用和滥用的模式之一 我们中的许多人都曾经感染过单侧炎 奇怪的是 它的近亲单态 https segueuserfiles middlebury edu xp SingletonAndMonostate pdf知
  • 序列化/反序列化 Boost.Geometry rtree

    简短版本 是否有任何稳定 可靠的方法来序列化 反序列化 Boost Geometry rtree 较长版本 Boost Geometry 中的 rtree 实现对序列化 反序列化提供了实验性支持 但支持不稳定 在反序列化过程中有时会抛出异常
  • django webapi:将 django 模型转储为 JSON

    我正在尝试将 django 模型转储为 JSON 格式 我尝试这样做 import json from api models import User from django http import HttpResponse def user
  • Android 房间分页不起作用

    我正在尝试使用 android Room API 从页面中的 sqlite 加载记录 问题是分页库正在将整个数据库加载到模型类中并将其与适配器绑定 这使得 UI 线程跳帧 它假设加载 20 条记录 然后在需要时继续添加更多记录 这是我的视图
  • 使用 MVC 的多步骤向导表单

    我计划使用 asp net mvc 2 构建一个多步骤表单 因此 我的 Web 应用程序将有 5 个页面对应 5 个步骤 每个步骤都有两个提交按钮 上一个和下一个 每个步骤的输入数据将被存储以供以后查看 例如 我们已经输入了步骤 1 2 3
  • 铁路路线限制未按预期发挥作用

    I asked this https stackoverflow com questions 31408608 rails make all routes default to format json今天早些时候关于将所有路由包装为默认 j
  • 从 ProceedingJoinPoint 获取 java.lang.reflect.Method?

    问题很简短 有没有办法从aspectj ProceedingJoinPoint 获取Method 对象 目前我正在做 Class parameterTypes new Class joinPoint getArgs length Objec
  • ARM GDB只能在Linux上无法访问内存

    尝试将开发切换到 Linux 但遇到了一个 可能是简单的新手 问题 在我的 Mac 上 我可以使用 ARM GDB arm eabi none gdb从 GNU ARM 嵌入式工具链 加载我的elf到我的STM32L432 然后在我的断点处
  • 线性刻度的十字准线/x 值工具提示

    查看 d3noob 的这个块 http bl ocks org d3noob 6eb506b129f585ce5c8a http bl ocks org d3noob 6eb506b129f585ce5c8a 它最初是为日期格式的 x 轴设