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.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 如何在 SVG 元素上使用箭头标记?

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1
  • 为什么我的 D3 SVG 图上的轴不会更新?

    I have 简单的 D3 散点图 http www raxacoricofallapatorius com test scattertest html我在显示数据的几个不同属性之间切换 但是虽然我可以更改数据点 并按照我想要的方式进行转换
  • d3 v4 使用 TypeScript 进行拖放

    我正在使用 D3 库 v4 和 Angular2 我想拖放 svg 元素 我有一个代码 item call d3 drag on start dragStarted on drag dragged on end dragEnded and
  • 如何进行多个 d3 窗口大小调整事件

    我有三个svg一页上的元素 每个元素都由 D3 陪伴 每个都有自己的页面调整大小逻辑 由我写的简单模块 https github com TimeMagazine d3 base让他们做出反应 问题在于 只有最后一个调整大小事件被触发 因为
  • 如何精确缩放已翻译的d3地图

    我有一张已翻译的地图 以使其正确适合画布 我正在尝试实现一种缩放它的方法 它确实有效 但是当您放大时它会远离中心 而不是以鼠标甚至画布为中心 这是我的代码 function map data total views var xy d3 ge
  • 在 d3.js 中换行长文本

    我想将长文本元素换行为宽度 这里的例子取自博斯托克的wrap功能 http bl ocks org mbostock 7555321 但似乎有两个问题 首先 wrap的结果没有继承元素的x值 文本左移 其次它绕在同一条线上 并且lineHe
  • nvd3.js - 无法更改折线图中线条的颜色

    我正在尝试更改 nvd3 折线图不同线条的颜色here http nvd3 org livecode index html codemirrorNav但我无法理解该怎么做 我想将示例中的 2 条线的颜色更改为绿色和青色 我试过 nv add
  • LeafletJs只显示一个国家

    我使用 Leafletjs 和 D3 来显示地图 我只想在地图上显示英国 Leaflet和D3是否可以只显示英国 这当然是可能的 现在的解决方案取决于您是想使用 D3 绘制英国 还是想从 Tile Server 获取它 在后一种情况下 有一
  • 如何在D3节点中放置图像?

    到目前为止 我已经创建了这些 D3 节点 用于创建可折叠的层次树 到目前为止 这些节点的颜色为 AA1C1C 深红色 以表明如果您单击它们 它们将扩展到更多节点 我想要做的是在节点中使用图像中的位置 这对于所有用户来说都是一个加号 以知道它
  • 如何在 d3.js 中填充 svg 圆圈内的图像

    这是我在 svg 中填充圆圈的代码 var svgContainer d3 select body append svg attr width 1000 attr height 1000 var circles svgContainer s
  • d3 序数尺度的映射

    我正在使用 D3 的序数比例将数字映射到颜色 我用过这个 color d3 scale ordinal range 1f77b4 ff7f0e 2ca02c d62728 9467bd 8c564b e377c2 domain 0 6 co
  • JS / d3.js:突出显示相邻链接的步骤

    再会 我之前对该项目的问题是 D3 js 根据相同的 json 值动态生成源和目标 https stackoverflow com questions 41138515 d3 js dynamically generate source a
  • 时间序列折线图与轴不同步

    本实验基于这个d3官方例子 http bost ocks org mike path 我想要实现的是可视化时间序列数据的最后 x 分钟 我有这个代码的副本jsfiddle http jsfiddle net 225dC 3 单击以添加新数据
  • 如何使用 d3.js 沿 GeoJSON 路径对对象进行动画处理?

    我正在使用 D3 js 从 GeoJSON 文件生成并渲染路径 效果很好 但现在我想沿着该路径为对象设置动画 我知道如何使用 D3 和标准 SVG 来做到这一点 创建过渡并设置其持续时间 对于过渡的每一帧 使用 Complete 查找沿路径
  • 如何使用 dc.js 或 d3.js 为行图添加轴标签

    对于条形图和堆积图 我们可以使用 xAxisLabel X Axis Label and yAxisLabel Y Axis Label 为各个轴添加标签的函数 但 有没有办法为行图添加轴标签 尝试这样的事情 dc renderAll fu
  • SVG 文本在 IE 中消失,直到我单击它

    我在 Internet Explorer Edge 以 Win7 上的为准 中遇到与 SVG 创建和操作相关的问题 在我正在开发的应用程序中 我们使用 d3 生成 SVG 形式的图形 在 Chrome 和 Firefox 中 它们工作得很好
  • 在 D3 v4 中使用 Zoom.translateExtent 约束地图平移

    我正在尝试显示单个州的地图 并将缩放和平移限制在州的边界内 除了缩放状态路径以适应较小的容器时的平移约束之外 它大部分都在工作 我认为这归结于我不明白该使用什么参数zoom translateExtent 虽然我对此很陌生 所以它可能是别的
  • 为什么 d3.js-lasso 不读取 svg 变量

    https jsfiddle net t52f1rn7 https jsfiddle net t52f1rn7 我正在尝试制作一个线条末端有圆圈的折线图 我想选择两个点并通过单击绘制线条 然后我找到了套索插件 我尝试将它用于相同的目的 选择
  • crossfilter - 计算具有属性的所有记录的百分比

    这是我的问题 我正在使用 python Flask 服务器从 mongo db 获取 json 数据 并在其中指定要导入的字段 此数据采用 json 格式 并且仅像这样获取 一旦通过 graphs js 中的 crossfilter 是否可

随机推荐

  • 找不到模块:无法解析“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