D3 动态重绘Y轴

2024-02-21

我想创建一个具有多个(线性)轴的动态图。绘制轴后,我想(当新数据到达时)更改数据域并重新绘制/更新轴。我可以使用 D3 选择现有轴并执行此操作,还是必须在代码中显式保存每个轴?我希望我的问题不会令人困惑。

// init all Y-Axis
$.each(chart.YAxes, function (index) {
            var yScale, yAxis;
            yScale = d3.scale.linear().range([chartHeight, 0]);
            yScale.domain([this.YMin, this.YMax]);

            yAxis = d3.svg.axis()
                        .scale(yScale)
                        .ticks(10, this.Title)
                        .orient("left");

            d3Chart.append("g")
                   .attr("class", "yAxis " + "y" + this.ID)
                   .call(yAxis);
......

// update Y-Axis (after new data arrives...)
var myYAxis = d3.select(".y" + yAxis.ID);
var myScale = myYAxis. **// get Scale ??**
myScale.domain([newYMin, newYMax]);   
d3Chart.select(".y" + yAxis.ID)
            .transition().duration(300).ease("sin-in-out")
            .call(myYAxis);

thx...!


您需要保留对轴对象的引用,以便可以再次调用它。选择包含它的 DOM 元素并调用它是行不通的。有很多关于如何更新轴的示例,例如在这个问题 https://stackoverflow.com/questions/16919280/how-to-update-axis-using-d3-js.

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

D3 动态重绘Y轴 的相关文章

  • D3 DataMaps:气泡上的 OnClick 事件

    我正在关注 datamaps 文档 并尝试为我在 svg 上渲染的气泡设置一个 onClick 侦听器 现在svg div具有以下子标签
  • 如何访问 nvd3 中 d3 图的 x 和 y 比例?

    我正在使用 nvd3 绘制一些系列 并想向图中添加一些任意矩形 如何访问 d3 图的底层 x 和 y 比例 以便将矩形坐标转换为 svg 像素坐标 以便与现有数据的比例相同 function d3 render response nv ad
  • d3.js:如何在圆环图中的标签下方添加值

    我是 d3 js 的新手 到目前为止我所取得的成就是 this https jsfiddle net saras arya ypdw96v9 使用教程和视频 Now I am trying to add the dataset value
  • 在三角形内强制图表 d3.js

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

    data name c1 id 4690 day 1 3 start 8 00 end 10 00 name c3 id 5283 day 3 4 start 8 00 end 17 00 name c4 id 4862 day 4 sta
  • D3.js - 如何迭代数据集中的子数组

    我试图让 d3 迭代数据中的子数组并生成多个饼图 这是完整的代码 来自https gist github com mbostock 1305111 https gist github com mbostock 1305111 and htt
  • d3 转换改变了哪些属性?

    我试图了解 d3 中到底发生了什么转换 例如 var bars svg selectAll null data my values enter append rect statement before transition attr x 1
  • 分层边缘捆绑:添加父组标签

    我对 HTML 和 JavaScript 还很陌生 我面临着著名的分层边缘捆绑可用here https bl ocks org mbostock 7607999 由 D3 js 库生成 My goal is to add a semi ci
  • 数据与线的日期和时间转换

    我使用 D3 V5 创建了此图表 另外 我已在小提琴上附加了示例数据 您可以点击此处查看 https plnkr co edit pINxcS9yt9AuJmSk02Fs p preview 我已经包括了tick函数代码块 它在向左滑动的路
  • 当节点扩展时增加d3中的连接链路长度

    我正在 d3 中研究可折叠力布局 我面临的问题是 当单击节点时 我需要增加节点之间链接的长度 以保持子节点之间的链接距离相同 当分析扩展时 如何增加分析和耀斑之间的距离 保持与子级的距离较小 是的 您可以通过定义一个函数来做到这一点力 链接
  • d3.js 和 Chart.js 之间的比较(仅适用于图表)[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我在项目中多次使用过 Chart js 但从未使用过 d3 js 很多人说 d3 js 是最好的图表 javascript 框架 但没
  • d3.js:在树布局中展开多个路径

    My JSON contains same node names in different paths I would like to be able to open all children with the same name or h
  • 矩形相当于文本的文本锚点表示属性吗?

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

    如何在D3中导入json文件 I did d3 json temp json 但是我如何在进一步的代码中访问这个数据集呢 到目前为止我已经尝试过 var data d3 json temp json 但使用 data data 在其余代码中
  • 我可以补间 D3 弧的结束角度,但不能补间起始角度。我究竟做错了什么?

    我只是在玩这个演示并自己重新创建它 http bl ocks org mbostock 5100636 http bl ocks org mbostock 5100636 我可以定义一个新的 endAngle 并且它会很好地制作动画 但现在
  • 如何使用 D3 (或只是 javascript)将表单选项设置为“选择”

    有没有一种方法可以搜索选择表单元素中的所有选项 并将具有匹配值的选项指定为 已选择 var xStat G var statOptions Points PTS Goals G Assists A Penalty Minutes PIM c
  • 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 旭日弧尺寸

    我正在尝试根据以下示例创建 D3 旭日图 https bl ocks org maybelinot 5552606564ef37b5de7e47ed2b7dc099 https bl ocks org maybelinot 55526065
  • 需要帮助绘制多元线之间的区域 - 而不是从轴到线

    我是 d3 js 的新手 我正在努力填充多元百分位数图中线条之间的区域 我不希望在最底线下方或最顶线上方填充任何区域 第一列始终位于图表的底部 第 5 个百分位 最后一列将始终位于图表的顶部 第 95 个百分位 我需要每条线之间单独的区域段
  • d3.event.translate 在触摸设备的缩放上包含 NaN

    我使用 d3 为我的 svg 编写了一个自定义缩放函数 如下所示 Zoom behavior function myzoom xpos d3 event translate 0 ypos d3 event translate 1 vis a

随机推荐

  • 找不到模块:无法解析“swiper/react”

    我在使用最新版本的 Swiper 时也遇到了同样的问题 它在我之前的项目中有效 但现在不起作用 连那个版本都没有 最新版本也试过了 这是我的代码 Import Swiper React components import Swiper Sw
  • xtext 自定义作用域:函数参数

    我正在尝试自定义作用域 这样 如果我的语言中有类似函数的东西可以获取参数 我希望这些参数仅在出现分号之前才可见 而在这个范围之外 我希望它不可见 我尝试在文件 MyDslScopeProvider xtend 中重新定义方法 getScop
  • 在我获取输入数据之前,什么会对其进行重新格式化?

    我有一个数据湖存储帐户 我有一个充满包含 JSON 格式数据的文件的目录 其中包括一些包含 ISO 8601 格式时间的字符串值 即 reading time 2008 09 15T15 53 00 91077 现在 当我使用数据工厂创建管
  • Android中保存同一个Activity的多个实例状态

    我正在开发一个 Android 应用程序 当数据来自使用相同额外内容的相同 Activity 时 我希望避免重新加载类似数据 具体来说 当我使用 extra 启动 Activity A 时 我使用这个 extra 从服务器加载远程数据 通过
  • Android Studio:“Gradle 同步失败:无法从选定的 JDK 运行 JVM。”

    自从安装Android Studio 3 2后 我一直无法运行Java 我尝试过jdk 8u181 windows x64 jdk 10 0 2 windows x64 bin jdk 11 windows x64 bin 环境PATH并重
  • 映射到同类 Traversable 的 Traversable 类型

    简洁版本 Scala 中的大多数泛型集合都有一个map实际上 该方法将返回相同类型的集合 List A map f A gt B 返回一个List B 例如 Scala 集合库就是为了实现这一目标而明确设计的 如果我想编写对任何此类集合具有
  • 使用 Selenium 上传文件失败

    我正在尝试使用 Selenium 在 Eclipse 上使用以下代码将文件上传到表单 search driver find element by xpath input type file search send keys D test t
  • 使用 image.complete 查找图像是否缓存在 chrome 上?

    我一直试图找出外部图像是否用js缓存在浏览器上 这是我到目前为止的代码
  • XML 转换导致 FileNotFoundException

    由于缺乏信息 我之前发布的问题已关闭 如果我在这里遗漏了什么 请告诉我 转换器似乎将 file 添加到我的文件路径的开头 我在 Solaris 环境中工作 应用转换时会发生以下情况 DOMSource sourcexml new DOMSo
  • Android模拟器无法创建上下文0x3005

    我对 Android 开发完全陌生 我正在尝试在 Android 中执行一个小任务 注册表单 但是 我收到以下错误 2013 12 05 11 06 26 Emulator could not get wglGetExtensionsStr
  • C++ 随机猜数字游戏

    我必须编写一个程序来运行随机猜谜游戏 游戏的数字是从 1 到 100 猜测者可以尝试 20 次 最后应该被问是否愿意再玩一次 如果猜测者高或低 还必须有多种打印输出选项 我已经完成了程序的一部分 我知道我仍然需要添加其他打印输出选项 但现在
  • 解释UnixTime毫秒

    我正在尝试找到更好的方法在 C 中将 DateTime 转换为 unix 时间戳 我发现有一个 DateTimeOffset ToUnixTimeMilliseconds 方法 public long ToUnixTimeMilliseco
  • MvxCachingFragmentCompatActivity消失了吗?

    我正在尝试升级到 MvvmCross 5 2 但在 MvxCachingFragmentCompatActivity 上出现语法错误 这个班级消失了吗 正如 5 2 博客中所解释的 https www mvvmcross com mvvmc
  • 如何更新d3表?

    鼠标移动时更新 d3 js 表时遇到一些问题 这是一个简化的example https jsfiddle net lszhou2115 npzjLng9 6 在jsfiddle中 这是主要代码 function mousemove var
  • 如何修复 ubuntu 中的“没有名为‘kivy._clock’的模块”错误?

    我正在尝试使用 Ubuntu 16 04 for Python 3 6 安装 kivy GUI lib 我尝试执行kivy官方网站中的步骤 https kivy org doc stable installation installatio
  • GAE java中通过证书进行客户端身份验证

    我正在写一份申请GAE java通过其身份验证用户证书 我已经使用创建了一个自签名证书keytool在客户端 我还在 Google 应用程序引擎中为我的应用程序启用 https 请求 申请流程非常简单 用户使用任何浏览器进入应用程序的主页
  • 为什么 c++ std::max_element 这么慢?

    我需要找到向量中的最大元素 所以我使用std max element 但我发现它是一个非常慢的函数 所以我编写了自己的版本并设法获得 x3 更好的性能 下面是代码 include
  • 如果等于运算符没有被空格包围,为什么它不起作用?

    我尝试了以下脚本 bin bash var1 Test 1 var2 Test 2 if var1 var2 then echo Equal else echo Not equal fi 它给了我Equal 虽然应该已经打印出来了Not e
  • 如何在 ASP.NET Core 2.0 和 EF Core 2.0 中将应用程序设置从项目根获取到 IDesignTimeDbContextFactory 实现

    我正在 ASP NET Core 2 0 中构建应用程序 但在 EntityFramework 迁移方面遇到问题 我的 DbContext 位于一个单独的项目中 解决方案名称 项目名称前缀 Data 因此我创建了 IDesignTimeDb
  • D3 动态重绘Y轴

    我想创建一个具有多个 线性 轴的动态图 绘制轴后 我想 当新数据到达时 更改数据域并重新绘制 更新轴 我可以使用 D3 选择现有轴并执行此操作 还是必须在代码中显式保存每个轴 我希望我的问题不会令人困惑 init all Y Axis ea