d3.js - 变换和过渡,多行

2024-02-23

我已按照以下说明进行操作:http://bost.ocks.org/mike/path/ http://bost.ocks.org/mike/path/用于用单线创建单图并对其进行动画处理。

并且,弄清楚如何在图表中创建多条线:在 D3.js 中绘制多条线 https://stackoverflow.com/questions/8689498/drawing-multiple-lines-in-d3-js

主要问题:在将新数据转移并将其推入数据数组后,我很难转换多行。

我创建了N行:(时间:纪元时间,前进)

var seriesData = [[{time:1335972631000, value:23}, {time:1335972631500, value:42},...],
                  [{time:1335972631000, value:45}, {time:1335972631500, value:13},...],
                  [{time:1335972631000, value:33}, {time:1335972631500, value:23},...}],
                  [...],[...],...
                  ];

var seriesColors = ['red', 'green', 'blue',...];

line = d3.svg.line()
        .interpolate(interpolation)
        .x(function(d) { return x(d.time); })
        .y(function(d) { return y(d.value); });

graphGroup.selectAll(".line")
        .data(seriesData)
            .enter().append("path")
            .attr("class", "line")
            .attr("d", line)
            .style('stroke', function(d, i) { return seriesColors[i]; })
            .style('stroke-width', 1)
            .style('fill', 'none');

并且正在尝试更新NJavascript setInterval(...) 调用方法的行:

graph.selectAll("path")
    .data(seriesData)
    .attr("transform", "translate(" + x(1) + ")")
    .attr("d", line)
      .transition()
    .ease("linear")
    .duration(transitionDelay)
    .attr("transform", "translate(" + x(0) + ")");

它可以完美地绘制初始集,但是一旦我更新数据数组,线条就会消失。


更新01

我意识到我在 x 中使用纪元时间值(轴显示日期:时间),因为如果我使用上面的说明性系列数据,我的示例可能会起作用。

问题是使用 x(1)、x(0) 的“变换”、“翻译”返回巨大的数字,方式larger比我的图表需要转换。

我修改了update Nlines 方法(上图)使用手动方法:

新问题:现在图形正确地向左移动,但是线条/图形pops回到右侧,每个 setInterval 更新都会执行。

它正确地推送/移动了 seriesData 数组,但它不会继续向左滚动以显示实际正在绘制的新数据。

graph.selectAll("path")
        .data(seriesData)
        .attr("d", line)
        .attr("transform", null)
          .transition()
        .ease("linear")
        .duration(2000)
        .attr("transform", "translate(-200)");

我使用过的另一个参考是:http://bl.ocks.org/1148374 http://bl.ocks.org/1148374

有什么想法吗?


我突然意识到可能发生错误的一件事是使用的数据调用,最初是

.data(seriesData)

更新使用

.data([seriesData])

这可能会导致问题,但如果不看到其余的情况就很难判断,你能把它放在 jsfiddle 上吗?

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

d3.js - 变换和过渡,多行 的相关文章

随机推荐

  • 停止异步 ISearchJob 的正确方法

    我要使用WUA API https msdn microsoft com en us library windows desktop aa387099 v vs 85 aspx并以这种方式开始执行异步搜索更新 CComPtr
  • python中比较两个列表的最佳算法

    我在 python 中有两个列表 list1 和 list2 其中填充了自己的数据类型 我想将它们与列表进行比较 并将这些列表的所有元素提供给标准输出 或其他地方 但以特定的顺序 不以任何方式对列表进行排序 List1 和 List2 可以
  • 通过 go-mssqldb 进行 golang SQL Server 查询

    我正在尝试查询SQL Server 2008 R2使用去 https github com denisenkom go mssqldb https github com denisenkom go mssqldb SQL Server 20
  • 不存在的目录/文件 Web API(非控制器)的自定义错误页面

    我知道我可以为不存在的控制器或错误的路由设置自定义错误页面 但是如果用户尝试下载某个目录中不存在的文件 如何显示自定义错误页面 我根本无法让它发挥作用 它仍然显示默认错误页面 这篇博文将引导您处理 ASP Net Web API 中的 40
  • 在浏览器中显示 Xquery (.xq) 文件

    我对编程很陌生 对 xml xquery 也很陌生 我有一个 xq 文件 带有 html 和 xquery 代码 和 xml 文件 用于存储数据 在测试时 我可以使用 stylus studio 查看 xq 页面的显示方式 但我无法使用网络
  • MPlayer 如何识别 MJPEG 流?

    由于 MJPEG over http 基本上包括传输由定义的分隔符分隔的一系列 JPEG 图像 MPlayer 如何识别它是 MJPEG 流 谢谢 看一下 MplayerMjpegStreamViewing http www lavrsen
  • web.config 反斜杠出现两次 Visual Studio 2010

    我有一个在 Visual Studio 2008 中制作的 asp net Web 应用程序 一切都工作得很好 直到我切换到 VS 2010 当发生这种情况时 我开始看到数据库连接字符串出现一些奇怪的行为 该字符串 已编辑 但格式相同 如下
  • x86-64 中 movq 和 movabsq 的区别

    我说的是 x86 64 Intel 架构中的数据移动指令 我读过 常规的movq指令只能具有可表示为 32 位二进制补码数的立即源操作数 而movabsq指令可以将任意 64 位立即数作为其源操作数 并且只能将寄存器作为目标 您能详细说明一
  • Docker-compose:如何使用相同的网络地址从容器和主机访问 Localstack 资源

    我使用 docker compose 在 2 个独立的容器中运行 python API 和 Localstack 实例 以进行本地开发 该 API 有一个端点 可生成预签名的 AWS S3 URL 并重定向用户 以便直接从 S3 加载图像
  • 如何从私有模块中的公共函数引用私有类型?

    我想将类似的函数分组在一个文件中 这些函数需要返回一个非公开的类型 struct MyStruct mod my mod use super MyStruct There are other similar functions that a
  • 通过 INavigationProvider 将菜单项添加到主菜单但不显示?

    使用 Orchard cms 1 5 1 我创建了一个模块 其中包含从 Web 服务获取列表的控制器 我想在启用此模块时在主菜单中添加一个菜单项 为此我创建了 主菜单如下 public class MainMenu INavigationP
  • 如何获取 ESRI 地图 - Angular 的屏幕截图

    如何在 UI 上获取 Esri 地图当前状态的屏幕截图并将其从 Angular 下载为 Pdf 以下代码是我当前的 ts 代码 如果需要添加其他部分 请告诉我 esri map component html div div esri map
  • Javascript crc32 函数和 PHP crc32 不匹配

    我正在开发一个 web 应用程序 我想将 PHP 中服务器端生成的一些 crc32 值与我在 Javascript 中生成的一些 crc32 值进行匹配 两者都使用相同的输入字符串但返回不同的值 我在webtoolkit上找到了一个crc3
  • Python:有吸引力的、干净的、可打包的 Windows GUI 库 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我需要为最终用户下载的桌面应用程序创建一个简单的基于 Windows 的 GUI 该应用程序是用 python 编写的 并将打包为安装程序
  • 在c中读取/写入bmp文件

    我正在尝试处理 bmp 文件 首先 我尝试从 bmp 文件读取标题和数据并将其写入新文件 pragma pack push 1 Windows 3 x bitmap file header typedef struct char filet
  • golang http2 服务器推送的高级客户端

    golang 1 6 发布 支持 Http2 我在网上搜索 但找不到任何有关如何使用 Go 进行 Http2 服务器推送的示例 是否有为此实现的高级客户端 人们已经做过什么例子了吗 std 库中的 http2 实现不公开 http2 特定的
  • AngularJS 和 i18next

    我见过一些 Angular 的 i18n 插件 但我不想重新发明轮子 i18next 是一个很好的库 所以我打算使用它 我创建了一个指令 i18n 它只调用 i18n 库 define app jquery i18n function ap
  • 按年份划分的R组

    我将 csv 读入 R 现在我有了一个数据列表 head data Date Open High Low Close Volume 1 31 Dec 14 223 09 225 68 222 25 222 41 2402097 2 30 D
  • Android - 使用动画的工件

    应用发现的 3D 转换时 我遇到屏幕上的视觉伪影问题here http developer android com resources samples ApiDemos src com example android apis animat
  • d3.js - 变换和过渡,多行

    我已按照以下说明进行操作 http bost ocks org mike path http bost ocks org mike path 用于用单线创建单图并对其进行动画处理 并且 弄清楚如何在图表中创建多条线 在 D3 js 中绘制多