d3.js - 使用 D3js v4 的多环 donut chart-6ren

d3.js - 使用 D3js v4 的多环 donut chart

转载作者：行者123 更新时间：2023-12-04 16:11:50

我正在尝试使用多环工作来获得这个 donut chart 。这是使用 d3js v4。这是另一篇在 v3( multi-ring pie chart using d3js ) 中工作的帖子的延续。创建的路径总是显示 M0,0Z .谁能让我知道这是哪里出了问题。我也收到 Expected lenght NaN在控制台中。

var dataset = [{
  "name": "Population Quater",
  "code": "POP_QUATER",
  "parent": "POP_BY_QUAT",
  "children": [{
    "name": "POP_CYQ1",
    "code": "POP_CYQ1",
    "parent": "POP_QUATER",
    "value": "6772",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "POP_CYQ2",
    "code": "POP_CYQ2",
    "parent": "POP_QUATER",
    "value": "6716",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "POP_CYQ3",
    "code": "POP_CYQ3",
    "parent": "POP_QUATER",
    "value": "6714",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "POP_CYQ4",
    "code": "POP_CYQ4",
    "parent": "POP_QUATER",
    "value": "6703",
    "label": "CYQ4",
    "children": []
  }, {
    "name": "POP_LYQ1",
    "code": "POP_LYQ1",
    "parent": "POP_QUATER",
    "value": "6721",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "POP_LYQ2",
    "code": "POP_LYQ2",
    "parent": "POP_QUATER",
    "value": "6671",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "POP_LYQ3",
    "code": "POP_LYQ3",
    "parent": "POP_QUATER",
    "value": "6708",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "POP_LYQ4",
    "code": "POP_LYQ4",
    "parent": "POP_QUATER",
    "value": "6734",
    "label": "LYQ4",
    "children": []
  }]
}, {
  "name": "Transient Pop",
  "code": "TRANSIENT_POP",
  "parent": "POP_BY_QUAT",
  "label": "Transient Pop",
  "children": [{
    "name": "TRANSIENT_LYQ1",
    "code": "TRANSIENT_LYQ1",
    "parent": "TRANSIENT_POP",
    "value": "54",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ2",
    "code": "TRANSIENT_LYQ2",
    "parent": "TRANSIENT_POP",
    "value": "86",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ3",
    "code": "TRANSIENT_LYQ3",
    "parent": "TRANSIENT_POP",
    "value": "219",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ4",
    "code": "TRANSIENT_LYQ4",
    "parent": "TRANSIENT_POP",
    "value": "191",
    "label": "LYQ4",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ1",
    "code": "TRANSIENT_CYQ1",
    "parent": "TRANSIENT_POP",
    "value": "52",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ2",
    "code": "TRANSIENT_CYQ2",
    "parent": "TRANSIENT_POP",
    "value": "91",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ3",
    "code": "TRANSIENT_CYQ3",
    "parent": "TRANSIENT_POP",
    "value": "222",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ4",
    "code": "TRANSIENT_CYQ4",
    "parent": "TRANSIENT_POP",
    "value": "186",
    "label": "CYQ4",
    "children": []
  }]
}, {
  "name": "Seasonal Pop",
  "code": "SEASONAL_POP",
  "parent": "POP_BY_QUAT",
  "label": "Seasonal Pop",
  "children": [{
    "name": "SEASONAL_LYQ1",
    "code": "SEASONAL_LYQ1",
    "parent": "SEASONAL_POP",
    "value": "2",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "SEASONAL_LYQ2",
    "code": "SEASONAL_LYQ2",
    "parent": "SEASONAL_POP",
    "value": "24",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "SEASONAL_LYQ3",
    "code": "SEASONAL_LYQ3",
    "parent": "SEASONAL_POP",
    "value": "152",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "SEASONAL_LYQ4",
    "code": "SEASONAL_LYQ4",
    "parent": "SEASONAL_POP",
    "value": "55",
    "label": "LYQ4",
    "children": []
  }, {
    "name": "SEASONAL_CYQ1",
    "code": "SEASONAL_CYQ1",
    "parent": "SEASONAL_POP",
    "value": "2",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "SEASONAL_CYQ2",
    "code": "SEASONAL_CYQ2",
    "parent": "SEASONAL_POP",
    "value": "22",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "SEASONAL_CYQ3",
    "code": "SEASONAL_CYQ3",
    "parent": "SEASONAL_POP",
    "value": "161",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "SEASONAL_CYQ4",
    "code": "SEASONAL_CYQ4",
    "parent": "SEASONAL_POP",
    "value": "55",
    "label": "CYQ4",
    "children": []
  }]
}];

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


var color = d3.scaleOrdinal(d3.schemeCategory20);

var pie = d3.pie()
  .sort(null).value(function(d) {
    return d.value; //since score is the parameter for the pie
  });

var arc = d3.arc();

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

var gs = svg.selectAll("g")
  .data(dataset)
  .enter()
  .append("g");
var path = gs.selectAll("path")
  .data(function(d) {
    return pie(d.children);
  })
  .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/4.11.0/d3.min.js"></script>

最佳答案

我重写了一点你的代码。检查，现在它可以工作了。注意我用属性 parentIndex 扩展数据对象当我存储当前数据项的索引时。在 d3 版本 3 中，您可以获得父数据项的索引作为第三个参数 function(d,i,j) (本例中为 j)，但在 d3 版本 4 中，第三个参数不是索引。

var path = gs.selectAll("path")
  .data(function(d, i) {
    return pie(d.children).map(function(payload) { // <-- !!!
      return {
        payload: payload,
        parentIndex: i
      }
    })
  })
  .enter().append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d, i) {
    return arc
            .innerRadius(10 + cwidth * d.parentIndex) //<-- !!!
            .outerRadius(cwidth * (d.parentIndex + 1))(d.payload); //<-- !!!
  });

var dataset = [{
  "name": "Population Quater",
  "code": "POP_QUATER",
  "parent": "POP_BY_QUAT",
  "children": [{
    "name": "POP_CYQ1",
    "code": "POP_CYQ1",
    "parent": "POP_QUATER",
    "value": "6772",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "POP_CYQ2",
    "code": "POP_CYQ2",
    "parent": "POP_QUATER",
    "value": "6716",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "POP_CYQ3",
    "code": "POP_CYQ3",
    "parent": "POP_QUATER",
    "value": "6714",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "POP_CYQ4",
    "code": "POP_CYQ4",
    "parent": "POP_QUATER",
    "value": "6703",
    "label": "CYQ4",
    "children": []
  }, {
    "name": "POP_LYQ1",
    "code": "POP_LYQ1",
    "parent": "POP_QUATER",
    "value": "6721",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "POP_LYQ2",
    "code": "POP_LYQ2",
    "parent": "POP_QUATER",
    "value": "6671",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "POP_LYQ3",
    "code": "POP_LYQ3",
    "parent": "POP_QUATER",
    "value": "6708",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "POP_LYQ4",
    "code": "POP_LYQ4",
    "parent": "POP_QUATER",
    "value": "6734",
    "label": "LYQ4",
    "children": []
  }]
}, {
  "name": "Transient Pop",
  "code": "TRANSIENT_POP",
  "parent": "POP_BY_QUAT",
  "label": "Transient Pop",
  "children": [{
    "name": "TRANSIENT_LYQ1",
    "code": "TRANSIENT_LYQ1",
    "parent": "TRANSIENT_POP",
    "value": "54",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ2",
    "code": "TRANSIENT_LYQ2",
    "parent": "TRANSIENT_POP",
    "value": "86",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ3",
    "code": "TRANSIENT_LYQ3",
    "parent": "TRANSIENT_POP",
    "value": "219",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ4",
    "code": "TRANSIENT_LYQ4",
    "parent": "TRANSIENT_POP",
    "value": "191",
    "label": "LYQ4",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ1",
    "code": "TRANSIENT_CYQ1",
    "parent": "TRANSIENT_POP",
    "value": "52",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ2",
    "code": "TRANSIENT_CYQ2",
    "parent": "TRANSIENT_POP",
    "value": "91",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ3",
    "code": "TRANSIENT_CYQ3",
    "parent": "TRANSIENT_POP",
    "value": "222",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ4",
    "code": "TRANSIENT_CYQ4",
    "parent": "TRANSIENT_POP",
    "value": "186",
    "label": "CYQ4",
    "children": []
  }]
}, {
  "name": "Seasonal Pop",
  "code": "SEASONAL_POP",
  "parent": "POP_BY_QUAT",
  "label": "Seasonal Pop",
  "children": [{
    "name": "SEASONAL_LYQ1",
    "code": "SEASONAL_LYQ1",
    "parent": "SEASONAL_POP",
    "value": "2",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "SEASONAL_LYQ2",
    "code": "SEASONAL_LYQ2",
    "parent": "SEASONAL_POP",
    "value": "24",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "SEASONAL_LYQ3",
    "code": "SEASONAL_LYQ3",
    "parent": "SEASONAL_POP",
    "value": "152",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "SEASONAL_LYQ4",
    "code": "SEASONAL_LYQ4",
    "parent": "SEASONAL_POP",
    "value": "55",
    "label": "LYQ4",
    "children": []
  }, {
    "name": "SEASONAL_CYQ1",
    "code": "SEASONAL_CYQ1",
    "parent": "SEASONAL_POP",
    "value": "2",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "SEASONAL_CYQ2",
    "code": "SEASONAL_CYQ2",
    "parent": "SEASONAL_POP",
    "value": "22",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "SEASONAL_CYQ3",
    "code": "SEASONAL_CYQ3",
    "parent": "SEASONAL_POP",
    "value": "161",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "SEASONAL_CYQ4",
    "code": "SEASONAL_CYQ4",
    "parent": "SEASONAL_POP",
    "value": "55",
    "label": "CYQ4",
    "children": []
  }]
}];

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


var color = d3.scaleOrdinal(d3.schemeCategory20);

var pie = d3.pie()
  .sort(null).value(function(d) {
    return d.value; //since score is the parameter for the pie
  });

var arc = d3.arc();

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

var gs = svg.selectAll("g")
  .data(dataset)
  .enter()
  .append("g");
var path = gs.selectAll("path")
  .data(function(d, i) {
  	return pie(d.children).map(function(payload) {
			return {
      	payload: payload,
        parentIndex: i
      }
    })
  })
  .enter().append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d, i, j) {
    return arc.innerRadius(10 + cwidth * d.parentIndex).outerRadius(cwidth * (d.parentIndex + 1))(d.payload);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

关于d3.js - 使用 D3js v4 的多环 donut chart ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46837117/

文章推荐： r - 使用 ggplot2 和分组变量创建圆环图

文章推荐： python - 带有百分比标签的python中的圆形条形图

c++ - 通过 boost 几何从多边形(环)裁剪部分多边形(环)
尝试从环的底部到顶部裁剪一个环 (50%)，但结果并不像我预期的那样有效。我的解决方案是 using bg_point_type = boost::geometry::model::d2::poin
Clojure、环、SSL
上下文我查看了 Google 上“Clojure、Ring、SSL”的前三个结果，对于使用 Clojure + Ring 设置 SSL 的“正确方法”似乎没有达成共识。问题: 理想的答案是以下形式
math - 在环(环)内生成均匀随机点
这个问题在这里已经有了答案: 8年前关闭。 Possible Duplicate: Create random number within an annulus 我想在 annulus 内获得一个统一
Azure:具有唯一键的循环(环)队列
对于我的应用程序，我需要组织一个循环(环形)队列。这意味着任何已处理的消息都会立即进入队列末尾继续处理。例如: 队列:A、B、C。接收方处理 A。队列:B、C、A。 2 和 3 应以原子方式执行
c - 直线与圆柱(环)相交的截距长度
我有一些源，其坐标(xn，yn，zn)相对于环的中心C和沿着我的视线的单位 vector (ns_ux，ns_uy，ns_uz)。我想计算这些源是否分别穿过内半径和外半径分别为 9.5 和 10.5
ios - 动画旋转的 Sprite 环
我想为 iOS 制作一个应用程序，我在 cocos2d 方面有一定的专业知识。我搜索了很多，但我发现的只是使用 webkit 实现此动画的 CSS，除了 C、Objective C、VHDL 之外，我
mysql - 用于插入的 Coldfusion 环
我有一个关于冷聚变和循环的问题。我有这个程序，我要求用户输入用户信息。用户可以为每种食物输入一些东西。 #GET_ITEM.ITEM_NBR#
python key 环，无法设置密码
安装后我遇到了 python key 环问题。这是我的步骤: $ python >>> import keyring >>> keyring.set_password('something','oth
c++ - MFC:环 - 无颜色变化
我正在尝试从书中学习 MFC:MV C++ Windows Application by Example(2008)。有示例应用程序。我可以在其中绘制填充女巫所选颜色的戒指: void CRingVi
html - 具有背景和百分比边框宽度的 CSS 环
我正在寻求一些关于在 CSS 中创建“环形”形状的建议。以下是我需要实现的一些重要的详细目标: 环形边框粗细必须是百分比数字，而不是 rm 或绝对像素数，这样环形才能根据容器大小完全响应；环形边框需
html - 带大括号的 Jade 环
我真的很难掌握 Jade。我想做一些非常非常简单的事情:打印“一些文本”3次。我有一个 mixin 函数: mixin outputText() - for (var i = 0; i <= 3; i
clojure - 如果用户未登录，如何将他们重定向到不同的页面？ (环/组合)
如果用户已登录(即 session 的 user-id 键具有非零值)，则路由到一个页面的最佳方法是什么；如果用户未登录，则路由到另一个页面的最佳方法是什么？理想的情况是有 2 组不同的路线。谢谢!
C GPGMe 忽略用户 key 环
我最近完成了一个程序，该程序将公钥下载到内存中，然后使用所有公钥创建一条加密消息。但是，我在创建仅包含我下载的 key 的列表时遇到了一些困难。首次下载时，它们存储在 gpgme_data_t 中。我
mysql - key 环 mysql 谷歌云
我需要在通过谷歌云运行的mysql中安装 key 环插件，但我不能，因为用户没有SUPER权限。有人遇到过同样的情况吗？ mysql 安装插件 keyring_file SONAME 'keyrin
google-cloud-kms - 从控制台编辑或删除 key 环
这是一个新手安全/控制台问题......我在我的项目中在欧洲的一个特定(错误)位置创建了一个 key 环。我在控制台中看不到任何编辑甚至删除 key 环的方法。 key 圈完全是空的……里面没有 k
key - gnome key 环 pkcs11 警告
当我尝试从命令行(例如 svn)执行许多不同的操作时，我收到 gnome-keyring 警告。示例: $ lp README.txt WARNING: gnome-keyring:: couldn'
clojure - 包含数据依赖项时，lein 环 headless 服务器失败
我的目标是使用 compojure 创建一个 Web 应用程序并附加 datomic 作为数据库。单独来看，这两个组件工作得很好。但是，当我尝试启动服务器时leinring server-headle
java - 如何在Java中使用公钥OpenPGP(GPG)而无需访问物理 key 环
设置: 使用 GnuPG 的 Linux 或使用 GPG4Win(OpenPGP) 的 Windows 2048 RSA key 对已由可以访问 key 环的特权用户创建已创建第二个较低权限的用户，
mysql - 在 Laravel 中使用 key 环
要创建加密表，可以使用以下查询: CREATE TABLE `t1` ( `intcol1` int(32) DEFAULT NULL, `intcol2` int(32) DEFAULT N
java - Thymeleaf Spring 环 n 项目
我对 Spring 框架很陌生。我尝试迭代列表中的 10 个项目。我使用 thymeleaf 模板。这是我的代码；此代码无法正常工作，我找不到运行该代码的方法。感谢您的关

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

d3.js - 使用 D3js v4 的多环 donut chart