程序员经验分享-hwhale

D3.js - 具有多个环和动画过渡的甜甜圈图

2024-03-25

如何为下面的多环D3图表添加过渡动画效果？

如图所示D3.js - 具有多个环的圆环图 https://stackoverflow.com/questions/17507728/d3-js-donut-charts-with-multiple-rings

var dataset = {
                apples: [53245, 28479, 19697, 24037, 40245],
                oranges: [53, 28, 19, 24],
                lemons: [53245, 28479, 19697, 24037, 40245],
                pears: [53245, 28479, 19697, 24037, 40245],
                pineapples: [53245, 28479, 19697, 24037, 40245],
            };

            var width = 460,
                height = 300,
                cwidth = 25;

            var color = d3.scale.category20();

            var pie = d3.layout.pie()
                .sort(null);

            var arc = d3.svg.arc();

            var svg = d3.select("#chart").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

            var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
            var path = gs.selectAll("path")
                .data(function (d) { return pie(d); })
                .enter().append("path")
                .attr("fill", function (d, i) { return color(i); })
                .attr("d", function (d, i, j) { return arc.innerRadius(10 + cwidth * j).outerRadius(cwidth * (j + 1))(d); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="chart" width="600" height="400"></div>

您需要将 .transition 方法添加到您的 vis 中

var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
//added line//
    .transition().duration(750).attrTween("d", arcTween)
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });

//added tween function
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

我刚刚参考了这个网站 http://bl.ocks.org/mbostock/1346410

这里有一个叉形小提琴 http://jsfiddle.net/joshvito/zjv8mq9k/

目前尚不清楚您想要如何为图表添加动画效果。

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

javascript

d3js

donutchart

D3.js - 具有多个环和动画过渡的甜甜圈图 的相关文章

  • onclick 函数上的 CSS 选择器

    有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a

  • 在生产中使用 babel-node 可以吗

    我一直在使用 babel node 和 browserify 以及 babelify 转换来开发一个网站 以支持 ES6 语法 我只是想知道 我可以在生产中运行它吗 babel node server 而不是 node server 要在

  • 如何使弹出窗口出现在我的鼠标进入悬停目标的位置？

    这是一个示例代码 用于显示我的按钮下方的弹出窗口 fn popover defaults extend fn tooltip defaults placement bottom content 现在我希望弹出窗口出现在光标移动的位置 不仅是

  • 循环内的局部变量会被垃圾收集吗？

    我想知道将循环内引用的任何变量放在循环外是否更有效 或者它们可以像函数内的变量一样被垃圾收集吗 var obj key val for var i 0 i lt 10 i console log obj or for var i 0 i l

  • 优化数据可视化 Web 应用程序的性能

    我正在重写 3 年前编写的数据可视化网络工具 从那时起 浏览器的 JavaScript 引擎变得更快 所以我正在考虑将部分工作从服务器转移到客户端 在页面上 数据在表格和地图 或图表 中可视化 它使用相同的数据 但以不同的方式 因此准备显示

  • 在 HTML5 中使用 JS 创建内联 SVG

    我正在使用本地 HTML5 文件 它有在顶部 我在里面放了这样的东西

  • 在 Angular 单元测试中应该如何处理运行块？

    我的理解是 当您在 Angular 单元测试中加载模块时 run块被调用 我认为如果你正在测试一个组件 你不会想同时测试run块 因为unit测试应该只是测试一个unit 真的吗 如果是的话有什么办法可以防止run阻止运行 我的研究让我认为

  • jQuery - 提高处理 XML 时的选择器性能

    我正在处理一个 XML 文件 当使用 XPath 样式选择器选择节点时 该文件的性能非常慢 这是运行特别慢的部分代码 for i 0 i

  • Disqus 评论数始终为 0 条评论

    我想我已经按照通用代码的说明设置了 Disqus 问题是它总是说某个帖子有 0 条评论 拿这个帖子来说 http tx0rx0 com retropie and the raspberry pi http tx0rx0 com retrop

  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在

  • 数据表“footerCallback”函数未在页脚中显示结果

    我尝试获取每列的总和并将结果显示在页脚中 我在用着 页脚回调 https datatables net reference option footerCallbackDatatables提供的功能 但是它在页脚中没有显示任何内容 数据表解释

  • 很奇怪！调用 window.location 或 location.replace 会重定向到该页面，然后再次返回！

    我处于调试模式 因此我可以看到正在访问哪个页面 当我打电话时window location or window location replace 它会转到该页面 然后返回原始页面 怎么会这样 解决方案是添加 window location

  • 表单序列化javascript（无框架）

    想知道 javascript 中是否有一个没有 jquery 或任何框架的函数可以让我序列化表单并访问序列化版本 2023 年更新 Use FormData https developer mozilla org en US docs We

  • Promise 构造函数回调的主体何时执行？

    假设我有以下代码构造一个Promise function doSomethingAsynchronous return new Promise resolve gt const result doSomeWork setTimeout gt

  • javascript/jquery 禁用点击提交按钮，防止重复提交

    所以我的提交按钮如下所示 a href img src images user create product png border 0 a 当我双击它时 显然会双重提交 问题是 我将信息保存在数据库中 因此那里会有重复的信息 我不想那样 这

  • 不可见的 reCAPTCHA - 缺少必需的参数：sitekey

    我正在为每个带有具有类的按钮的表单动态加载不可见的 reCAPTCHAg recaptcha 我遇到的问题是验证码未正确加载 我不知道为什么 我按照验证码网站上的文档进行操作 但我不确定如何以及为什么会出现此错误 Uncaught Erro

  • d3力定向布局-链接距离优先

    在 d3 中使用力导向布局 如何使链接距离成为优先事项 同时仍然保持良好的图形布局 如果我指定动态链接距离 但保留默认费用 则我的图形距离会因费用函数而发生一些变形 并且不再是准确的距离 但是 如果我删除电荷 图表将如下所示 任何建议表示赞

  • 无法从 JSON 请求获取数据，尽管我知道它已返回

    我试图获取从 getJSON 返回的数据 但我无法让它工作 我已经在 search twitter API 上尝试了相同的代码 效果很好 但它不适用于其他网站 我知道数据已返回 因为我在使用检查器时可以找到它 我通过检查器找到的值是 id

  • 在 Firefox 中使用 Javascript 检测键盘布局

    有没有办法在 Firefox 中检测客户端的键盘布局 我知道 Chrome 的答案是肯定的 请参阅https developer mozilla org en US docs Web API Navigator keyboard https

  • 指定在任何 Jest 设置发生之前运行的代码

    tl dr 是 1 我怎样才能让Jest使用原生的require函数可以在任何地方加载我的测试中的所有模块 2 我将在哪里 如何进行修改 即替换为esm加载程序 https github com standard things esm ht

随机推荐

  • 为什么初始化程序不能处理返回 list 的属性？

    找不到这个问题的答案 这一定是显而易见的 但仍然如此 我尝试在这个简化的示例中使用初始化程序 MyNode newNode new MyNode NodeName newNode Children Add smth mistake is h

  • 以串行对象作为参数的多进程

    我在使用 Python 并将串行对象作为参数传递给单独的进程时遇到问题 该程序在 Windows 8 中运行 因此不能选择使用全局变量 from multiprocessing import Queue from multiprocessi

  • 如何隐藏AG-Grid中的列？

    如何隐藏 AG Grid 中的列 并且它不应显示在工具面板中 var columnDefs headerName Stone ID field Stone ID width 100 hide true 您可以设置列属性抑制工具面板 http

  • 强制 VSProps 设置覆盖项目设置

    我有一个 vsprops 文件 它定义了针对 Visual Studio 2008 构建所有项目时应使用的优化 如果我将项目的属性设置为 从项目默认值的父级继承 它将起作用 并将它们填充到 vcproj 文件中 但是 这并不能保护我免受开发

  • R - 复制组内的值

    我有一个数据框 其中有某人在过去 3 年 2016 年 2017 年 2018 年 中获得的总分 还有他们每年的得分列 我的数据框如下所示 myDF lt data frame ID c 1 1 1 2 2 3 4 Dates c 2016

  • Rails 3 无效多字节字符 (US-ASCII)

    我发现了一个类似的帖子here https stackoverflow com questions 1739836 invalid multibyte char us ascii with ruby on rails但无论如何我都无法解决问

  • 斐波那契搜索

    有人请解释一下斐波那契搜索算法 我尝试了很多资源并进行了很多搜索 但算法仍然不清楚 大多数资源都在与二分搜索的链接中描述了它 但我不明白它们 我知道斐波那契搜索算法是二分搜索的扩展 我对此非常了解 我的书也未能解释 我知道斐波那契数定义为

  • 我们可以在MySql中为UPPERCASE和LOWERCASE函数创建函数索引吗

    我们可以在MySql中创建功能索引吗UPPERCASE and LOWERCASE功能 我已经搜索过 但在互联网上找不到任何相关的内容 如果有人实现了这样的事情 是的 添加了 MySQL 8 0 13索引表达式 https dev mysq

  • 带有左连接的 LINQ 和枚举

    我有一个枚举 public enum Status New InProgress Processed InComplete 我有以下查询要查询 以根据状态提供列表计数 但现在我只知道它是否存在 因此 如果已处理计数为零 我将不会获得任何值

  • Python从图中获取所有路径

    我正在尝试找到用户可以通过网站访问的路径 我使用以下格式表示我的图表 graph 0 1 2 1 3 6 0 2 4 5 0 3 1 4 6 2 5 6 2 6 1 4 5 我已经实现了深度优先算法 但需要对其进行更改才能发挥作用 它需要返

  • Python-关于操作系统上的文件句柄限制

    嗨 我用 python 编写了一个程序 当我打开太多临时文件时 我会得到一个异常 Too much open files 然后我发现 Windows 操作系统或 C 运行时具有文件句柄限制 因此 我使用 StringIO 更改我的程序 但仍

  • APP_INITIALIZER 之后服务实例化两次

    问题是 我需要进行 http 调用并存储生成动态路由所需的对象 所以 我利用了 APP INITIALIZER app module ts import ApplicationService from application service

  • Firebase“Parcelable 遇到 IOException 写入可序列化对象”，对象包含 DocumentReference 的 ArrayList

    我正在尝试传递到另一个活动User包含 Firestore Arraylist 的对象DocumentReference当我开始活动时 我遇到了这个异常 我没有使用 Parceleable 所以您能否确认此错误是由于要传递的对象的复杂性造成

  • TFS 集合级别的自定义安全组

    我们有一组开发人员 测试人员和 BA 他们将为集合下的 30 多个项目工作 因此不要为每个项目添加他们 而是希望在集合级别创建安全组 以便每个人都可以访问集合下的所有项目 在 TFS 上 我们希望在集合级别拥有自定义组 例如开发人员 测试人

  • VBA自动将.Range更改为.range

    我一直在编写一个 Excel 宏来帮助我在工作中处理数据 现在我已经完成了代码的编写 但我不断收到错误 因为 Microsoft Visual Basic 不断将 Range 更改为 range 每当这样做时 我都会收到编译错误 因为该方法

  • 为什么 z 索引不起作用？

    所以如果我理解的话z index正确的是 在这种情况下它会是完美的 我想将底部图像 标签 卡片 放置在其上方的 div 下方 所以你看不到锋利的边缘 我该怎么做呢 z index 1 on the image tag card or z i

  • 发送者和接收者根据请求通过 ssh 传输文件？

    我创建了一个程序 它迭代一堆文件并调用其中的一些文件 scp

  • 如何将字符串的元素放入具有特定行为的列表中

    list1 A B list2 1 1 1 2 1 3 1 4 2 1 2 2 2 3 2 4 我需要我的输出 1 1 1 2 1 3 1 4 2 1 2 2 2 3 2 4 现在如果我知道 子列表 1 的长度 4 sublist2 的长度

  • EF Code First 延迟加载不起作用

    我首先使用 EF6 的代码 但似乎无法让延迟加载工作 预加载工作正常 我有以下课程 public class Merchant User public virtual ICollection

  • D3.js - 具有多个环和动画过渡的甜甜圈图

    如何为下面的多环D3图表添加过渡动画效果 如图所示D3 js 具有多个环的圆环图 https stackoverflow com questions 17507728 d3 js donut charts with multiple rin

热门标签