D3 中的饼图(甜甜圈)图段顺序

2023-12-30

我有一个使用 d3 和 jQuery 滑块构建的圆环图,允许用户在不同的数据点之间进行选择。该图表动画显示了数据值之间的过渡,一切都很好。

问题:这些段始终按逆时针大小顺序渲染(从最大到最小)。这意味着分段根据其大小在图表中切换其位置。

这种行为让用户感到困惑,但不幸的是我不知道如何改变它。我希望这些部分保持在初始位置。

工作 js-fiddle:http://jsfiddle.net/kerplunk/Q3dhh/ http://jsfiddle.net/kerplunk/Q3dhh/

我相信问题一定在于执行实际补间的函数:

// Interpolate the arcs in data space.
function pieTween(d, i) {
  var s0;
  var e0;
  if(oldPieData[i]){
    s0 = oldPieData[i].startAngle;
    e0 = oldPieData[i].endAngle;
  } else if (!(oldPieData[i]) && oldPieData[i-1]) {
    s0 = oldPieData[i-1].endAngle;
    e0 = oldPieData[i-1].endAngle;
  } else if(!(oldPieData[i-1]) && oldPieData.length > 0){
    s0 = oldPieData[oldPieData.length-1].endAngle;
    e0 = oldPieData[oldPieData.length-1].endAngle;
  } else {
    s0 = 0;
    e0 = 0;
  }
  var i = d3.interpolate({startAngle: s0, endAngle: e0}, {startAngle: d.startAngle, endAngle: d.endAngle});
  return function(t) {
    var b = i(t);
    return arc(b);
  };
}

d3 自动按饼图的值排序。幸运的是,禁用排序非常简单,只需使用sort(null)方法上的donut函数,即:

var donut = d3.layout.pie().value(function(d){
    return d.itemValue;
}).sort(null);

这是一个fiddle http://jsfiddle.net/KsFPh/.

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

D3 中的饼图(甜甜圈)图段顺序 的相关文章

随机推荐

  • ToolBar 内的 LinearLayout 与父级不匹配

    我在 ToolBar 中放置了一个 LinearLayout1 然后在 LinearLayout1 中放置了另外 5 个 LinearLayout 每个子 LinearLayout 都有一个 ImageView 这里我的问题是 Linear
  • 设计者强制将资源嵌入表单中,而不是使用 Resources.resx?

    这个问题让我摸不着头脑 我会尽量简洁 在高层次上 问题是 尽管该项目运行良好并且代码对我来说看起来不错 每当我编辑和构建某些表单时 Visual Studio 都会重写 Designer cs文件以一种非常不可取的方式 我非常有信心这些 D
  • 从 3D numpy 像素数组中删除空的“行”和“列”

    我本质上想用 numpy 裁剪图像 我有一个 3 维numpy ndarray对象 即 0 0 0 0 255 255 255 255 0 0 0 0 255 255 255 255 我想删除空白 在上下文中 已知空白是整行或整列 0 0
  • 如何从 TypeSpec 获取 TypeDef

    我正在尝试实现托管调试器 查看 MDBG 示例 目前 我一直在尝试使用 IMetaDataImport 获取基类层次结构方法 枚举方法 https msdn microsoft com en us library ms231658 v vs
  • 杀死 Heroku 上废弃的进程

    我以一种不太优雅的方式终止了 IRB 提示 从heroku run irb 现在我有一个僵尸进程 我似乎无法杀死它 Process State Command run 3 up for 2h irb r init rb web 1 up f
  • Google GDPR 同意。 AdMob 错误:检测到 IAB TCF v2.0 错误 我们检测到您的一个或多个网站或应用上的 IAB TC 字符串存在问题

    实施谷歌后UMP SDK https developers google com admob ump ios quick start为了获得欧盟用户的同意 我在 AdMob iOS 和 Android 应用 上遇到了以下错误 检测到 IAB
  • 从裸存储库获取子模块哈希

    我们有一个 gitolite 服务器和我们的客户定制应用程序 每个应用程序都有一个子模块 存储库 核心 它指的是我们的基础应用程序 我们现在想要创建一个仪表板 显示所有客户的应用程序以及核心所在的版本 gitolite 将所有内容存储在磁盘
  • 在一张图片中依次显示多张图片并具有从左到右反复翻转的效果

    假设我在可绘制文件夹中有多个图像 前 8 个图像 我想在 imageView 中一个接一个地显示所有这些图像 并重复从左到右翻转效果 ex img 0 img 1 img 8 img 0 img 1 我怎样才能做到这一点 private v
  • 类型错误:无法读取登录路由中未定义的属性“密码”

    当我使用 mysql 数据库中不存在的电子邮件请求 api 时 它会抛出错误 但在相反的情况下它会运行 Error S development Pepperkart pepperkart backend node modules mysql
  • 进程外 COM 服务器迁移到进程内 COM 服务器导致回调被阻止

    我们有一个现有的网络消息传递服务器 它实现了自定义通信协议 我们正在将其迁移到进程内 COM 对象 该服务器被实现为一个自由线程的进程外 COM 服务器 客户端可以向服务器注册 认为发布 订阅 以接收消息 迁移后 我们在调用 GUI 相关函
  • 哎呀! Google Chrome 无法连接到 localhost:8085

    我下载了 Apache Tomcat 7 以与 NetBeans 6 9 一起使用 我尽我所能地遵循了安装过程 我想我做的一切都很好 当我尝试进入 Tomcat 欢迎屏幕但键入时http 本地主机 8085 http localhost 8
  • Rails 中单击按钮时传递参数

    现在 我拥有它 以便当用户从中选择一个选项时collection select 一个 div 是根据event id他们的选择 取决于Event 将会有多个EventOption如图所示 每个都有自己独特的 ID 我有EventOption
  • 可以在 VS Code 中使用单游戏吗?

    我使用的是 iball 笔记本 但没有足够的内存来安装 Visual Studio 我使用 VS code 没有任何问题 并且能够制作和创建我的控制台应用程序的可执行文件 我需要学习游戏开发 但每个人都一直说我需要安装 Visual Stu
  • Python Connexion — 400 响应错误中的控制“类型”键

    我在用着连接 https github com zalando connexion 一个用于 REST API 的 python 库 具有 swagger 定义 它对于实际请求正常工作 但是当出现错误情况 例如验证失败 时 它会返回如下响应
  • chrome.storage.sync 与 chrome.storage.local

    我试图了解如何使用 chrome storage api 我已将以下内容包含在我的manifest json permissions activeTab storage 然后 我使用开发工具打开了一个新选项卡并切换了
  • s3文件上传不返回响应

    我正在使用 Node AWS SDK 将文件上传到现有的 S3 存储桶 使用下面的代码 文件最终上传 但似乎有几次没有返回状态代码 另外 当文件成功上传时 return 语句不会执行 Code exports create function
  • Sharepreference来存储int值

    I have intvalue 我希望当我们单击警报对话框的正或负按钮时它会增加 1 并且即使用户关闭应用程序也存储 int 值 我已经完成了这些 但我不知道为什么这不起作用 int counter 在 oncreate 中 initA p
  • Google GMail API 服务帐户可列出多个帐户的电子邮件

    我正在开发一个 CRM 应用程序 其中所有员工用户都有一个位于同一域下的 GMail 帐户 我是这个域的管理员 之前 我使用 IMAP 对 CRM 中的所有 GMail 用户进行自定义访问 以便获取他们发送和接收的所有电子邮件 为此 我询问
  • 通过 VBA 在 Outlook 内部浏览器中打开网站

    我正在寻找通过 VBA 打开给定的网页 我可以使用以下方法来做到这一点 Set browser CreateObject InternetExplorer Application browser Navigate http google c
  • D3 中的饼图(甜甜圈)图段顺序

    我有一个使用 d3 和 jQuery 滑块构建的圆环图 允许用户在不同的数据点之间进行选择 该图表动画显示了数据值之间的过渡 一切都很好 问题 这些段始终按逆时针大小顺序渲染 从最大到最小 这意味着分段根据其大小在图表中切换其位置 这种行为