平移/缩放顺序尺度?

2024-05-24

我正在使用 d3 渲染简化的甘特图,并使用 d3.behavior.zoom 进行平移和缩放。

x 刻度是一个时间刻度(稍微修改为列中的中心日历日等)并且工作得很好,但是我在决定如何缩放/平移 y 刻度时遇到问题,其域是通常会出现的任务列表图表区域太多,无法容纳,因此需要平移/缩放。

有没有办法告诉默认序数比例对缩放/平移事件做出反应,或者我应该编写自定义比例?如果我需要编写自定义比例,最好将其基于 d3.scale.ordinal (让它存储整个任务列表,并仅使用可见子集作为其域),或者基于 d3.scale。线性(然后实现类似于范围带等的序数比例的东西?)。

或者我遗漏了什么(很可能是因为这是我使用 d3 的第一个项目)?


由于有人私下联系我解释我是如何做到这一点的,因此对我之前的答案略有扩展。

首先是相关应用程序的屏幕截图,其主要工作是聚合和显示从各种来源(PowerPoint 文件、公司数据库等)收集的规划数据。

相关位是带有彩色点的右侧垂直轴,其中每个点代表项目的工作量和涉及的组织。轴上的灰色区域是 d3.js 画笔,可以平移/调整大小以实时更改图表/表格数据。

// the axis is a regular ordinal axis, with a brush
y2 = d3.scale.ordinal(),
brush = d3.svg.brush().y(y2).on('brush', brushReact),
// [...]
// brush event handler
function brushReact() {
    if (tasksSlice == null)
        return;
    var yrb = y2.rangeBand(),
        extent = brush.extent(),
        s0 = Math.round(extent[0]/yrb),
        s1 = Math.round(extent[1]/yrb);
    if (s0 == tasksSlice[0] && s1 == tasksSlice[1])
        return;
    tasksSlice = [s0, s1];
    inner.refresh();
}

处理程序内部发生的事情非常简单:

  • 获取画笔范围
  • 将其转置为我的数据数组中的索引
  • 对我的数据数组进行切片并将结果设置为要显示的数据
  • 刷新图表和表格

我希望这能解决问题。

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

平移/缩放顺序尺度? 的相关文章

  • 仅在 Windows Chrome 上使用变换比例会导致文本模糊

    我遇到了一个关于 CSS 转换的非常令人沮丧的问题scale 我有一个文本块 我想在悬停时将其缩放 105 但它导致文本模糊 但仅限于 Windows 版本的 Chrome 我发现这个问题 https stackoverflow com q
  • 使用什么比例仅在 d3 js 中的 x 轴上表示年份

    我一直在 D3 Js 中开发年份 x 轴 与收入 y 轴 的面积图 数据如下 localData Revenue 4 5 Year 2011 Revenue 5 5 Year 2010 Revenue 7 0 Year 2012 Reven
  • 根据子节点数量动态调整 d3 树布局的大小

    从这个例子来看http mbostock github com d3 talk 20111018 tree html http mbostock github com d3 talk 20111018 tree html我已经建立了一个d3
  • FFmpeg 缩放不是平滑中心(而是锯齿形)

    我尝试执行基本操作zoompan https www ffmpeg org ffmpeg all html zoompan with FFmpeg 我有一个输入图像 png 1280x720 并从中创建一个 8 秒的视频 mp4 320x1
  • nvd3.js - 无法更改折线图中线条的颜色

    我正在尝试更改 nvd3 折线图不同线条的颜色here http nvd3 org livecode index html codemirrorNav但我无法理解该怎么做 我想将示例中的 2 条线的颜色更改为绿色和青色 我试过 nv add
  • UIPinchGestureRecognizer在水平和垂直方向分别的缩放

    使用 UIPinchGestureRecognizer 时 分别检测 读取水平和垂直方向上的捏合比例的最佳方法是什么 我看到了这个帖子 UIPinchGestureRecognizer 不同 x 和 y 方向的缩放视图 https stac
  • d3 饼图中的文本被路径覆盖

    我正在尝试按照 d3 的饼图示例进行操作http bl ocks org mbostock 3887235 http bl ocks org mbostock 3887235 我的代码的最小示例 const container graph
  • d3 树 - 有相同孩子的父母

    我一直在将代码从 JIT 转换为 D3 并使用树布局 我已经复制了代码http mbostock github com d3 talk 20111018 tree html http mbostock github com d3 talk
  • 如何在 Android 的 web 视图中显示内置缩放控件

    可能与此重复 始终在 WebView 中显示缩放控件1 https stackoverflow com questions 6866710 always show zoom controls in webview但我只想显示不一定总是需要的
  • 如果满足条件,则在另一个转换期间添加并发转换

    我试图在转换运行时添加一个新的转换 条件是如果 bar1 宽度与 bar2 匹配 则条形会更改位置 我使用了transition tween来查看是否满足条件 当第二个转换开始时 第一个转换停止 我希望第一个转换继续运行直到其持续时间结束
  • 街道名称 openstreetmaps 在 Android 上更具可读性

    我使用 Openstreetmaps 和 OsmDroid 构建了一个包含离线地图数据的 Android 应用程序 在具有 MDPI 320x480 像素的设备上 地图看起来不错 但在具有 480x800 像素的 HDPI 屏幕的设备上 街
  • Flutter:如何在 Web 视图中启用手势?

    我想在 Flutter 中通过捏合和张开来放大我的网页视图页面 我在网上做了一些研究 我在某处发现了这个 虽然 WebView Android 和 UIWebView iOS 内置了捏合和缩放功能 但它们需要 打开 在Android中 插件
  • 时间序列折线图与轴不同步

    本实验基于这个d3官方例子 http bost ocks org mike path 我想要实现的是可视化时间序列数据的最后 x 分钟 我有这个代码的副本jsfiddle http jsfiddle net 225dC 3 单击以添加新数据
  • 可以在 d3.js 中使用具有固定圆圈大小的圆圈包布局吗?

    此圆形包布局示例 http bl ocks org 4063269 http bl ocks org 4063269 非常适合我正在从事的项目 但是它会调整所有圆圈相对于彼此的大小 有没有一种简单的方法来指定每个圆的固定半径 我已经搜索了源
  • svg / d3.js 矩形一侧的圆角

    我知道 svg 有一个内置函数可以做圆角 但我只需要在四个角中的 2 个上做圆角 我知道我可以在彼此之上绘制多个矩形来模仿这一点 但这看起来有点俗气 有什么方法可以使用剪辑或任何 d3 js 方法来做到这一点吗 现在我有一个水平条形图 其中
  • 缩放网页内容上的特定元素(HTML、CSS、JavaScript)

    如果用户在移动设备上缩放网站 我只想缩放网站的特定元素 某个 div 下图展示了我的想法 如您所见 测试已缩放 但顶部 div 保持相同大小 仅包含 test 的 div 被缩放 缩放 有人可以给我一些关于如何实现这一目标的提示吗 我真的不
  • 窗口调整大小事件上的响应式画布

    我是画布概念的新手 我正在尝试使用 D3 js 绘制画布 我想让画布根据窗口屏幕大小进行响应 function onResize var element document getElementsByTagName canvas 0 var
  • d3.js - 具有树形布局,如何更改 X 轴以使用 D3 中的时间刻度?

    我有这个树布局 需要它在 X 轴上使用时间刻度来将节点固定为日期 另外 我需要保留根节点 它有一个is rootJSON 数据中的属性 在时间范围之外 Here http codepen io anon pen kIJxo是具有树布局工作的
  • 为什么 d3.js-lasso 不读取 svg 变量

    https jsfiddle net t52f1rn7 https jsfiddle net t52f1rn7 我正在尝试制作一个线条末端有圆圈的折线图 我想选择两个点并通过单击绘制线条 然后我找到了套索插件 我尝试将它用于相同的目的 选择
  • 显示具有多个父代的 D3 树

    我目前有this http bl ocks org mbostock 4339083图已实现 我希望在描述具有多个父节点的子节点时保持结构和可折叠性 有没有办法做到这一点 我研究了力图 但我也想保留一组层次结构 这意味着 1 级的父级可以有

随机推荐

  • 即使更新语句没有影响任何行,ExecuteNonQuery 返回 1

    我在这里面临一个非常奇怪的问题 我的 DAL 是使用编写的OdbcConnection对象并且工作完美 然而 我必须尊重一些要求 因此必须移动系统来使用MySqlConnection 你会说 不应该有任何问题 但是 现在有一点误解 当我执行
  • 如何在 Android 应用程序中实现 Rate It 功能

    我正在开发一个 Android 应用程序 一切正常 我的应用程序已准备好启动 但我还需要实现一项功能 我需要显示一个包含以下内容的弹出窗口 Rate It and Remind me later 在这里 如果任何用户在市场上对应用程序进行评
  • 电影播放完毕后关闭 AVPlayer

    我正在制作一个简单的 iPad 应用程序 按下按钮即可播放电影 电影播放 电影结束后我想关闭 AVPlayerView 以便它返回主屏幕 目前 当视频结束时 它停留在最后一帧 我现在的 ViewController Swift import
  • 更改焦点上的边框/颜色

    我尝试制作脚本 在专注于之后更改 div 边框底部的颜色
  • 如何在 Android 上以编程方式截取屏幕截图?

    如何不通过任何程序而是通过代码截取手机屏幕的选定区域的屏幕截图 以下代码允许将我的屏幕截图存储在 SD 卡上 并在以后满足您的任何需求 首先 您需要添加适当的权限来保存文件
  • CLion编辑标准项目模板

    我在 C Lion IDE 中编程 我找不到使用标准模板创建 c 文件的解决方案 我需要它 因为我必须在文件的开头生成一个注释块 我需要这个创建一个新项目 所以我必须更改标准项目模板的主文件 但我找不到任何解决方案 只是如何为新文件创建模板
  • Google Cloud Stackdriver 监控计算引擎磁盘使用情况

    我最近已经启动并运行了 Google 计算引擎实例 我探索了 Google Cloud stackdriver 用于监控 CPU 使用情况等 我已将 Stackdriver 代理安装到其中一个 Compute Engine 实例上进行测试
  • npm3 如何决定安装扁平还是嵌套?

    我的项目依赖于 Angular2 beta 6 另一个项目依赖于 Angular2 beta 0 我的项目的 package json dependencies angular2 2 0 0 beta 6 another project 0
  • 顶级棉花糖模式验证

    From 棉花糖 validation http marshmallow readthedocs org en latest quickstart html validation 我知道我可以在架构中的特定字段上注册验证器 如果验证器失败
  • 可以使用部分名称访问列表成员吗?这是一个功能吗?

    考虑这个 R 代码 gt l list key 1 gt l k 1 1 gt l ke 1 1 gt l k NULL gt names l 1 key 这是否意味着您可以使用以下方式访问列表成员 及其部分名称 当我在一次令人沮丧的错误搜
  • std::ifstream::read 或 std::ofstream::write 参数为零?

    是否完全可以 根据标准明确定义的行为 调用 mystream read buffer 0 or mystream write buffer 0 当然 什么也不会被读或写 我想知道在调用这两个函数之一之前是否必须测试提供的大小是否为空 是的
  • 在Ruby中做每个,如何在每n个项目中放置一个br

    假设我有 10 个项目要迭代 我想每 3 个项目放置一个 br 就像这个例子一样 我怎样才能在 Ruby 中做到这一点 1 2 3 br 4 5 6 br 7 8 9 br 10 解决方案1 1 10 each slice 3 a puts
  • 如何根据文件名中的时间戳对 NiFi 中的文件进行排序?

    我列出目录中的文件 然后从文件名中解析时间戳 然后我需要按顺序处理文件 我尝试使用 EnforceOrder 处理器 但它的设计目的不是为了在元素之间存在较大数字差距 就像时间戳中那样 时强制执行顺序 优先级属性优先级排序器还有其他问题 它
  • MVC - 没有具有“IEnumerable”类型键的 Viewdata 项目

    我是 MVC 和 ASP NET 的新手 希望学习一些知识 因此我尝试制作一些简单的应用程序来了解细节 好吧 我正在尝试制作一个下拉框显示书籍列表 其中显示书名但发布 book id 主键 我得到的错误是 不存在键为 IEnumerable
  • 如何从 C 中的另一个文件访问静态变量? [复制]

    这个问题在这里已经有答案了 可能的重复 静态变量 https stackoverflow com questions 1973162 static variable 如何从 C 中的另一个文件访问静态变量 由于静态变量具有文件范围 我认为我
  • Facebook 登录 - 如果存在用户帐户(并且未安装应用程序)登录失败

    我刚刚在测试我的应用程序时发现了这个问题 它真的开始让我烦恼 那么环境是这样的 没有安装 Facebook 应用程序 用户登录 iOS 系统帐户 在设置 gt Facebook 下 当我的应用程序第一次尝试对用户进行身份验证时 它会提供这面
  • 如何使用 ClangCodeModel 插件在 QtCreator 中设置 C++ 标准?

    抱歉 如果这是一个愚蠢的问题 但我已经尝试了几乎所有的方法 现在正在用头撞墙 问题是 带有 Clang 代码模型插件的 QtCreator 4 8 0 beta for Windows 解析我的项目 为 C 98 而实际上它是 C 17 但
  • 如何将图片保存到文件中?

    我正在尝试使用标准意图来拍照 然后允许批准或重新拍摄 然后我想将图片保存到文件中 这是我正在使用的意图 Intent intent new Intent android provider MediaStore ACTION IMAGE CA
  • 使用包含 [模板]、[编码]、[所有者] 的批处理文件和 .sql 文件创建 Postgres 数据库

    我想使用批处理文件创建 Postgres 数据库 现在执行此操作的正常方法如下 C Program Files PostgreSQL 9 0 bin createdb exe U Myadmin MydatAbseName 上面的脚本使用默
  • 平移/缩放顺序尺度?

    我正在使用 d3 渲染简化的甘特图 并使用 d3 behavior zoom 进行平移和缩放 x 刻度是一个时间刻度 稍微修改为列中的中心日历日等 并且工作得很好 但是我在决定如何缩放 平移 y 刻度时遇到问题 其域是通常会出现的任务列表图