D3:在多条线的折线图中跳过空值

2024-03-03

我有一个动态数组来显示包含多条线的折线图。例子:

var data = 
[[{x:2005, y:100}, {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:100}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]]

我的脚本的这一部分将绘制线条:

graph.selectAll("path.line")
.data(data)
.enter().append("path")
.attr("class", "line")
.style("stroke", function(d, i) { return d3.rgb(z(i)); })
.style("stroke-width", 2)
.attr("d", d3.svg.line()
.y(function(d) { return y(d.y); })
.x(function(d,i) { return x(i); }));

(我使用的脚本基于http://cgit.drupalcode.org/d3/tree/libraries/d3.linegraph/linegraph.js http://cgit.drupalcode.org/d3/tree/libraries/d3.linegraph/linegraph.js)

我的问题:数据数组是动态的,我事先不知道里面有什么。有时 2005 年的 y 值将为空:

var data = 
[[{x:2005, y:100},  {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:null}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]]

如何使第二行忽略第一个对象,并从 2007 年开始?

基于答案 1,这就是我现在所拥有的,仍然显示整行:

data = 
[[{x:2005, y:100},  {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:null}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]];

var validatedInput = function(inptArray) { 
 return inptArray.filter(function(obj) {
  return obj.y != null;
 });
};

graph.selectAll("path.line")
    .data(data, validatedInput)
  .enter().append("path")
    .attr("class", "line")
    .style("stroke", function(d, i) { return d3.rgb(z(i)); })
    .style("stroke-width", 2)
    .attr("d", d3.svg.line()
    .y(function(d) { return y(d.y); })
    .x(function(d,i) { return x(i); }));

最后我自己解决了这个问题,基于解决方案here https://stackoverflow.com/questions/17927570/multi-series-chart-d3-with-missing-values。诀窍是尽可能晚地删除空值,以便保留画布上所有值(点)的位置。

graph.selectAll("path.line")
    .data(data)
  .enter().append("path")
    .attr("class", "line")
    .style("stroke", function(d, i) { return d3.rgb(z(i)); })
    .style("stroke-width", 2)
    .attr("d", d3.svg.line()
    .y(function(d) { return y(d.y); })
    .defined(function(d) { return d.y; }) // Omit empty values.
    .x(function(d,i) { return x(i); }));

这适用于行首和行尾的空值。

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

D3:在多条线的折线图中跳过空值 的相关文章

  • 上传到google脚本中的特定文件夹

    所以我想制作一个表单 将文件 照片 视频上传到 Google Drive 中的特定文件夹 文件 照片 视频 但我不知道如何在 Google Apps 脚本中制作 我尝试了这样的操作 并在控制台中出现错误 无效的参数侦听器 所以这里有一个索引
  • 在 Firefox 中访问全局事件对象

    目标 运行一些函数 ajaxStart 但仅限于由特定事件触发时 代码 loading indicator ajaxStart function if event null if event type hashchange event ty
  • 如何使用 jQuery 检查文件输入大小?

    我有一个具有文件上传功能的表单 如果用户尝试上传的文件太大 我希望能够有一些不错的客户端错误报告 是否有一种方法可以使用 jQuery 检查文件大小 或者纯粹是在客户端上或以某种方式将文件发送回服务器进行检查 您实际上无权访问文件系统 例如
  • Firefox 中的 jQuery 表单提交

    请帮我解决一个问题 我有这个代码 用于通过锚点提交表单
  • 旋转嵌套 SVG

    我在用SVG js http svgjs com并尝试使用 SVG 进行一些操作 我以前使用过 canvas 但我对其生成的图像质量非常失望 因此我决定使用纯 SVG 我设法将所有内容都改为纯 SVG 方法 除了一件事 旋转 我无法让它发挥
  • 数字和数字对象有什么区别?

    存储在普通变量中的数字有什么区别 var foo 5 和一个数字对象 var bar new Number 5 数字对象可以用来做什么 A Number对象包含一些有用的方法和属性 例如 数字对象方法 Method Description
  • JavaScript 计算从今天到 7 天前的日期

    我正在计算从今天开始的日期前 12 天 但它不会返回正确的日期 例如 对于今天的日期 11 11 2013 mm dd yyyy 它返回 10 30 2013 而它应该返回 10 31 2013 这是代码 var d new Date d
  • 使用 jQuery 触发真实事件

    看来 jQuery 的trigger 仅运行与 jQuery 绑定的事件处理程序 我有一些使用本机浏览器事件绑定的模块 使用来自的代码https stackoverflow com a 2676527 https stackoverflow
  • jQuery 显示隐藏左侧滑动面板

    我希望在单击按钮时面板从浏览器的左边缘滑动 并在单击同一按钮 切换 时隐藏面板 Html div class panel div a href class slider arrow show raquo a CSS panel width
  • 无法获取子 DOM 元素

    注 由于问题有点复杂 为了可读性对代码进行了抽象 We ve a
  • Elasticsearch 前缀匹配消失且未添加 (QueryString)

    结转自Elasticsearch QueryStrings 部分匹配 NOT 查询 https stackoverflow com questions 40100006 elasticsearch querystrings partiall
  • 过滤文件上传仅用于文本文件

    我使用的是 Firefox 版本 14 0 1 我需要过滤上传文件窗口以仅显示 txt files 我的浏览器不仅仅支持文本文件 text plain 我可以通过指定此格式来限制图像文件 image 但我只需要过滤文本文件在文件选择器窗口中
  • ChartRangeFilter 作为谷歌时间轴图表的缩放功能,可使用数据视图从专用谷歌电子表格中读取数据

    我的目标是整合Whitehat 提供的这种缩放功能 https stackoverflow com questions 49306638 google timeline visualization dont change series ro
  • React:在哪里扩展对象原型

    我使用创建了一个纯 React 应用程序创建反应应用程序 https github com facebookincubator create react app 我想延长String类并在一个或多个组件中使用它 例如 String prot
  • 接近堆限制的无效标记压缩分配失败 - JavaScript 堆内存不足

    我正在使用 Angular 7 2 当我进入ng serve 我面临以下问题 致命错误 接近堆限制的无效标记压缩分配失败 JavaScript 堆内存不足 这意味着什么 我该如何解决这个问题 完整的错误消息是 FATAL ERROR Ine
  • 如何使用 HTML5 在画布上绘制心电图监视器?

    我尝试使用canvas html5绘制心电图系统 几乎我即将完成我的波浪正在移动 但不是连续地重复 但我想绘制波浪是从左到右连续移动的 下面的链接是示例 Ex https www youtube com watch v wuwBfSpVEg
  • 返回不在函数中

    Firebug 报告 返回不在函数中 错误 没有位置 好吧 第 1 行什么都没有 我怎样才能找到这个错误的根源 return not in function Break on this error return 0 javascript r
  • HighCharts - 两个 Y 轴,一个具有最大值

    我在使用 Highcharts 时遇到问题 我已将右 Y 轴设置为 min 0 和 max 100 它是 但它不起作用并生成 125 百分比 怎么了 http jsfiddle net SdTcU http jsfiddle net SdT
  • 仅在页面加载时执行 Javascript,而不是回发 (SharePoint)

    我正在尝试在 SharePoint 网站上的自定义页面上加载页面时执行一些 JavaScript 它使用当前用户填充人员选择器 问题是代码也在回发时执行 这是我不希望的 因为它会重置人员选择器的任何更改 我尝试过使用if IsPostBac
  • 如何从 fetch API 返回 json 响应

    我有一个像这样的函数 check auth fetch Urls check auth credentials include method GET then response gt if response ok return respon

随机推荐

  • 从 XML 文件生成 Java 类

    如何从 xml 文件获取 java 类 在这种情况下 我没有XML模式据我所知 这样我就不能使用 JAXB Castor 或其他 xml 绑定 API 您可以使用以下方法从 XML 文件生成架构某些工具 http oreilly com p
  • 变量应该是侦听器内部的最终变量[重复]

    这个问题在这里已经有答案了 可能的重复 无法引用在不同方法中定义的内部类内的非最终变量 https stackoverflow com questions 1299837 cannot refer to a non final variab
  • 在Force布局中向d3节点添加文本标签

    这是我的代码 你也可以有完整的代码JsFiddle https jsfiddle net ShuanWu 7pvhxfzg 我想在每个节点上都有标签 但我不能 顺便说一句 标签可以嵌入到圆圈中console https i stack im
  • 根据选项卡内容调整 QTabWidget 大小的问题(PyQT)

    我知道提供了一些关于 QTabWidget 调整大小的答案 Link 1 https stackoverflow com questions 28710003 force qt pyqt pyside qtabwidget to resiz
  • TextRenderer.MeasureText 结果的准确性

    调用 TextRenderer MeasureText 如下 TextRenderer MeasureText myControl Text myControl Font 并将结果与 控件的大小进行比较以检查文本是否适合 结果有时不正确 观
  • 使用 JavaScript 和 Google Gears 处理文件上传,有更好的解决方案吗?

    所以 我已经使用这种文件上传方法一段时间了 但 Google Gears 对实现 HTML5 规范的较新浏览器的支持似乎很差 我听说过这个词已弃用 https stackoverflow com questions 2292160浮动在几个
  • 使用 Pyspark 从关系数据集构建层次结构

    我是 Python 新手 一直致力于从关系数据集构建层次结构 如果有人知道如何进行此操作 那将有巨大的帮助 我有一个关系数据集 其中包含如下数据 currentnode childnode root child1 child1 leaf2
  • Symfony2 表单中实体字段类型的附加属性

    在Symfony2中 有没有一种方法可以将更多字段从实体映射到从基于实体的表单生成的选择下拉列表的选项标签 我目前有类似的东西 builder gt add creditcard entity array label gt Credit C
  • 如何正确地将 C 程序拆分为文件并包含?

    我组织了我的程序 将每个实体拆分在自己的文件中 是这样的 main c include student h include subject h include classroom h define PI 3 14 int sum int a
  • 将音频从 Android 设备流式传输到另一设备

    我如何通过互联网将音频从一台设备流式传输到另一台设备 我知道使用 Java 套接字发送基本数据 但想知道如何 在文件中途开始流式传输 例如 在歌曲的中间 发送的数据需要什么格式 MediaPlayer可以将url作为数据源 那么音频从服务器
  • 将光标移动到输入字段的开头?

    当您在 Stackoverflow 中点击 提问 时 您会看到一条文字 您的编程问题是什么 请描述一下 我想要同样的事情 我所需要做的就是将光标移动到文本字段的开头 我如何用 jquery 做到这一点 这可能有点过分了 但这些函数对于选择输
  • 从多个因子列生成虚拟矩阵

    我已经在网上搜索过 但没有找到答案 我有一个包含多列的大 data frame 每列都是一个因子变量 我想转换 data frame 使得因子变量的每个可能值都是一个变量 如果该变量存在于因子列中 则该变量包含 1 否则包含 0 这是我的意
  • Random 类线程安全吗?

    共享一个实例是否有效Random多线程之间的类 并打电话nextInt int 特别是来自多个线程 它是线程安全的 因为当多个线程使用时它仍然会生成随机数 Sun Oracle JVM 实现使用synchronized 和AtomicLon
  • 如何使用 Flask 获取页面访问者的 Windows 用户名?

    我到处搜索过 但没有找到任何结果 所以很抱歉 如果这篇文章是骗人的 我找不到任何东西 我为我的公司编写了这个相当广泛的网络应用程序 唯一剩下的就是添加某种审核 我不知道如何捕获当前访问我的页面的人的用户名 由于托管的盒子是以管理员身份登录的
  • 使用 PDFMake 嵌套/子表

    如何在 PDFmake 中使用嵌套 子表 我尝试过简单地放入多个表格 但这不会自动重复顶级表格的标题以进行分页符 此代码是使用子表的简化示例 它改编自 pdfmake Playground 的表格部分 通过 Google 搜索不容易找到 将
  • Djangocms 中的自定义视图?

    我还没有找到令人满意的方法 我有一个运行良好的 djangocms 设置 但我需要将 CMS 外部表格中的内容添加到我的主页 并在模板上呈现该内容 我可以做到这一点 但在 CMS 中编辑 urls py 以使用我的视图 如下所示 url r
  • 我可以使用 conda 安装 Python 的 alpha 或 beta 版本吗?

    在撰写本文时 alpha 版本3 8 0a4python 可用 我想在正式发布之前在 conda 环境中进行一些测试 出于教育目的并满足一些好奇心 当尝试 conda install 3 8 时 我得到了PackagesNotFoundEr
  • 为什么 stylelint vscode 扩展在我的计算机上不起作用?

    我遵循guide https marketplace visualstudio com items itemName stylelint vscode stylelint安装stylelintvscode 扩展 但它在我的电脑上不起作用 我
  • 在R中查找另一个字符串中的一个字符串

    我想在R中的另一个字符串中查找一个字符串 字符串如下 我希望能够将字符串 a 与字符串 b 匹配 输出应该是a b返回 TRUE a lt 6250 7250 6251 b lt 7250 a b FALSE 您可以使用regmatches
  • D3:在多条线的折线图中跳过空值

    我有一个动态数组来显示包含多条线的折线图 例子 var data x 2005 y 100 x 2007 y 96 5 x 2009 y 100 3 x 2011 y 102 3 x 2005 y 100 x 2007 y 105 x 20