程序员经验分享-hwhale

D3 折线图/面积图可以处理无序数据吗？

2023-12-14

请参考以下链接：https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

这里的数据是有序的（按顺序），如 2000 年 1 月、2000 年 2 月等，但我想让这个 d3 图适用于无序数据，如 2001 年 1 月、2000 年 2 月等。这可能吗？


简短回答：no.

线生成器或区域生成器（即该块中的生成器）将根据输入数据生成一条线（或一个区域）按其顺序。 API 说得很清楚：

d3.line()：为给定的数据数组生成一行。根据该线生成器的相关曲线，给定的输入数据可能需要排序在传递给线生成器之前按 x 值。 （强调我的）

让我们通过一个基本示例来看看这一点。我有一个值和年份数组，其中年份未排序：

var data = [{
  year: 2010,
  value: 100
}, {
  year: 2017,
  value: 70
}, {
  year: 2012,
  value: 50
}, {
  year: 2016,
  value: 10
}, {
  year: 2013,
  value: 90
}, {
  year: 2014,
  value: 20
}, {
  year: 2011,
  value: 50
}, {
  year: 2015,
  value: 40
}];

如果我按照现在的方式将数据传递给折线生成器，这就是我们得到的折线图：

var svg = d3.select("svg");
var data = [{
  year: 2010,
  value: 100
}, {
  year: 2017,
  value: 70
}, {
  year: 2012,
  value: 50
}, {
  year: 2016,
  value: 10
}, {
  year: 2013,
  value: 90
}, {
  year: 2014,
  value: 20
}, {
  year: 2011,
  value: 50
}, {
  year: 2015,
  value: 40
}];

var parseTime = d3.timeParse("%Y");

data.forEach(function(d) {
  d.year = parseTime(d.year)
});

var xScale = d3.scaleTime()
  .domain(d3.extent(data, function(d) {
    return d.year
  }))
  .range([0, 300]);

var yScale = d3.scaleLinear()
  .domain(d3.extent(data, function(d) {
    return d.value
  }))
  .range([150, 0]);

var lineGenerator = d3.line()
  .x(function(d) {
    return xScale(d.year)
  })
  .y(function(d) {
    return yScale(d.value)
  })
  .curve(d3.curveMonotoneX)

svg.append("path")
  .style("fill", "none")
  .style("stroke", "teal")
  .style("stroke-width", "2px")
  .attr("d", lineGenerator(data));
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

现在是相同的代码，但对数据进行排序：

data.sort(function(a, b) {
    return d3.ascending(a.year, b.year)
});

结果如下：

var svg = d3.select("svg");
var data = [{
  year: 2010,
  value: 100
}, {
  year: 2017,
  value: 70
}, {
  year: 2012,
  value: 50
}, {
  year: 2011,
  value: 10
}, {
  year: 2013,
  value: 90
}, {
  year: 2014,
  value: 20
}, {
  year: 2016,
  value: 50
}, {
  year: 2015,
  value: 40
}];

var parseTime = d3.timeParse("%Y");

data.forEach(function(d) {
  d.year = parseTime(d.year)
});

data.sort(function(a, b) {
  return d3.ascending(a.year, b.year)
})

var xScale = d3.scaleTime()
  .domain(d3.extent(data, function(d) {
    return d.year
  }))
  .range([0, 300]);

var yScale = d3.scaleLinear()
  .domain(d3.extent(data, function(d) {
    return d.value
  }))
  .range([150, 0]);

var lineGenerator = d3.line()
  .x(function(d) {
    return xScale(d.year)
  })
  .y(function(d) {
    return yScale(d.value)
  })
  .curve(d3.curveMonotoneX)

svg.append("path")
  .style("fill", "none")
  .style("stroke", "teal")
  .style("stroke-width", "2px")
  .attr("d", lineGenerator(data));
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

angular

d3js

D3 折线图/面积图可以处理无序数据吗？ 的相关文章

  • 不和谐机器人 |不和谐.js |类型错误：无法读取未定义的属性“长度”

    我正在制作一个 Discord 机器人 并且正在使用 CodeLyon 的视频作为参考 该错误位于我的 message js 文件中 该文件包含以下内容 require dotenv config create cooldowns map

  • 打字稿中枚举声明中的方括号的含义是什么？

    我正在浏览一个名为 Angular ngrx 项目的打字稿文件collection ts在那里 我看到声明了以下枚举常量 import Action from ngrx store import Book from models book

  • Web 串行 API - 未捕获（承诺中）DOMException：无法打开串行端口/所需成员 baudRate 未定义

    下面的代码可以在我的 Xubuntu 机器上运行 但现在我在 Kubuntu 上 它不再工作了 它不会打开端口 Arduino IDE 工作正常 可以向开发板写入代码 并且我可以在 Chrome 中选择设备 Arduino Uno 但当我尝

  • 使用 useReducers 调度函数发送多个操作？

    使用时是否可以通过调度函数发送多个动作useReducer挂钩反应 我尝试向它传递一组操作 但这会引发未处理的运行时异常 明确地说 通常会有一个初始状态对象和一个减速器 如下所示 const initialState message1 nu

  • Google App Engine：修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy

  • 如何抑制窗口鼠标滚轮滚动...？

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou

  • Node.js：如何在检索数据（块）时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to

  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src

  • 如何将 Google Charts 与 Vue.js 库一起使用？

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google

  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做

  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah

  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这

  • 如何使用tampermonkey模拟react应用程序中的点击？

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本

  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div

  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不

  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交

  • 相当于 $q.when 在角度 2 中

    我习惯使用 q使用角度 1 我正在迁移到角度 2 是否有等效的提供 when 方法 例如我需要迁移这个 service updateProDB rootScope connectionStatus q storageService send

  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比

  • Angular 6 + RxJS 6.0：如何将新元素推送到 Observable 包含的数组

    我从 firebase 服务器分块接收数据 同时渲染该数据需要一个坚持可观察包含数组的库 我不知何故无法将新的数据块推送到可观察到的现有数据块数组 从数据服务中 我通过主题的下一个调用并尝试添加新的 calEvent this homeWo

  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • MYSQL 表创建，其中列具有默认值（表达式）

    我有一张桌子Employee id name dept name 我想要 id 为字母数字 dddddaaaaa 前 5 位数字将自动递增 ID 其余 4 个字符将是员工姓名的前 4 个字符 例如 对于第一个员工 name John Tod

  • 何时使用 google Gson 的 tojson 方法接受类型作为参数？公共字符串toJson（对象src，类型typeOfSrc）

    我正在尝试使用 Gson 的 toJson API 将我的对象转换为 JSON 字符串 当我遇到 2 个支持相同功能的不同 API 时 根据文档 公共字符串 toJson 对象 src 请注意 如果任何对象字段是泛型类型 则此方法可以正常工

  • PHP-PEAR require_once('DB.php');

    我对 PEAR PHP 有疑问 这是错误 Warning require once DB php failed to open stream No such file or directory in WWW xxx php on line

  • Python自引用for循环

    a 0 1 2 3 for a 1 in a print a 1 输出是0 1 2 2 为什么a 1 每次迭代都会改变 您的代码相当于 a 1 a 0 print a 1 a 1 a 1 print a 1 a 1 a 2 print a

  • 如何使用 jQuery 对 :before 选择器进行动画处理

    我有一些带有 before 伪选择器定义的元素 我需要为其添加一些过渡 动画 但在 CSS 中这是不可能的 所以我认为我可以用 jQuery 做到这一点 但有些东西工作不正常 你能帮助我吗 这是我的代码 var pilot remote c

  • 在 PHP 中同一服务器上的多个域之间共享会话

    我需要为我的一个项目实现一种解决方案 其中我有多个域 多个子域 并且它们都需要共享同一个会话 所有域和子域都将指向连接到单个数据库的单个应用程序 意味着如果用户从任何域登录将能够访问应用程序其他域的安全页面 用户可以通过点击链接或在浏览器中

  • 我对 jQuery 中淡入淡出的概念感到困惑

    我正在开发一个在线测试应用程序 并且我正在从 xml文件到jsp页面 所有问题都在jsp中使用for循环显示 现在我不希望所有问题都在一个页面中 而是希望当用户单击 下一步 按钮时将它们一一显示 所以这是我正在使用的代码 它是 仅显示第一个

  • Oracle 的 pro*C 编译器和 gnu C（__builtin_va_list、__attribute__ 等）

    我正在用 pro 编译数据库C 将 ppc 库文件转换为 gcc 可以使用的 c 文件 但是 我在专业版中遇到了很多错误C 像下面这样 PCC S 02201 Encountered the symbol attribute when ex

  • 将 Javascript 数组转换为 Java 数组

    我正在尝试将 Java 中的 Javascript 数组转换为 Java 数组 我正在使用 javax script 包 我在这里测试了这个例子 但是类型 NativeArray 未被识别 https stackoverflow com a

  • Yii2：用 Sweet Alert 替换 Gridview 使用的默认确认消息

    我在用yii2mod yii2 sweet alert在我的项目中 我在基本和高级主题上使用它 我喜欢它 问题 如何更改网格默认确认对话框 普通 JavaScript 确认 以便使用甜蜜警报为了让它看起来更好 我已经尝试修改按钮的删除模板

  • PHP - 获取 ADODB 中受影响的行

    我使用 ADODB 创建到数据库的连接 我更新了数据库中的数据 没有错误 问题是我无法通过以下方式获取受影响的行数Affected Rows 我尝试使用非常简单的代码 但它不起作用 这是我的代码 sql UPDATE User SET Na

  • 异常：无法在控制器管理的 UINavigationBar 上手动设置委托

    我的应用程序从登录屏幕开始 然后继续CreateRequestTableViewController 并且所有内容都嵌入在导航控制器中 因此后退按钮CreateRequestvc 返回到登录屏幕 我想询问用户在注销之前是否确定自己是这样 并

  • 如何在C++ OpenCV中将图像（Mat）转换为inputArray？

    我想对灰度图像的强度值应用 k 均值聚类 我对如何将像素表示为向量感到非常困惑 所以如果我的形象是H x W像素 那么我的向量应该是H W维度 我尝试过的是 int myClass myFunction const cv Mat img c

  • 将 PDF 加载到 android webview 中

    in my android我必须加载的应用程序PDFs在服务器中进入webview 根据我使用的堆栈溢出问题谷歌文档视图在加载它时 但我的问题是有时它不显示文件webview而在另一个例子中它显示得很好 我无法弄清楚问题所在 但代码看起来没

  • genymotion：“player.exe 停止工作”

    我从他们的官方网站安装了 Windows 7 版的 GENYMOTION 软件包 它为我安装了 Oracle VM VirtualBox 和 Genymotion 之后 我打开 VirtualBox 然后打开 Genymotion 下载 G

  • 如何访问 WordPress.com 网站的 WP REST API？

    我看到 WordPress com 最近开始使用 Gutenberg 它依赖于 WP REST API 我正在构建一个插件 我想使用自托管站点中的 WP REST API 并让它与 WordPress com 站点通信 但我在查找 REST

  • 使用 jQuery 进行主动导航 - 无法将默认类应用于锚点

    我目前正在尝试制作一个navigation menu其中一个active class应用于锚点 其href与当前 URL 匹配的属性 因此我可以设置该锚点的样式 使其从菜单的其余部分中脱颖而出 这是我的标记 div h2 Navigatio

  • bodyParser 似乎不起作用

    抱歉 如果这个问题听起来 简单 但我不明白body parser处理这个非常简单的例子 use strict const PORT 3000 const express require express const bodyParser re

  • 所有时区时间都在哪里维护？

    如果我们设置TimeZone对于特定的Date java如何为此设置时间Date 例如如果我们设置PST作为时区 它如何知道确切的时区 它在哪里维护 提前致谢 时区数据源是特定于实现的 但我相信大多数实现都使用IANA 数据库 又名 zon

  • D3 折线图/面积图可以处理无序数据吗？

    请参考以下链接 https bl ocks org mbostock 34f08d5e11952a80609169b7917d4172 这里的数据是有序的 按顺序 如 2000 年 1 月 2000 年 2 月等 但我想让这个 d3 图适用

热门标签