D3.js - 从 JSON 创建多环圆环图数据集答案

【问题标题】：D3.js - Create multi-ring donut chart dataset from JSOND3.js - 从 JSON 创建多环圆环图数据集
【发布时间】：2015-11-29 21:22:03
【问题描述】：

我一直在尝试使用以下 json 创建一个多环甜甜圈图。

var dataset = {
        weeks: [
            {"displayName": "MUW", "name": "DEF", "score": 5},
            {"displayName": "DEFA", "name": "DEF", "score": 35}
        ],
        trimester: [
            {"displayName": "MUsW", "name": "DEsF", "score": 25},
            {"displayName": "DEFdA", "name": "DEdF", "score": 5}
        ]
    };

但是，它并不认为它是 D3 圆环图的合适数据集。

var gs = svg.selectAll("g")
    .data(d3.values(dataset))
    .enter()
    .append("g")
    .attr("class", "arc");

因为我想从这个数据集创建两个环，一个在顶部，另一个作为内部甜甜圈。并希望在每次单击甜甜圈切片时显示名称。

http://jsfiddle.net/pcr3ogt4/ - 代码示例。

【问题讨论】：

查看这些链接bl.ocks.org/mbostock/3887193 - 简单的甜甜圈（饼）图； zeroviscosity.com/d3-js-step-by-step/step-0-intro - 逐步开发的工作示例
我已经看到了，但是，我愿意创建一个多环圆环图。正如我所提到的，我有以下数据集。哪个不是通过该命令识别为正确形式的数据集。
您提供的代码不足。问题不清楚。
jsfiddle.net/pcr3ogt4 这是小提琴的链接
在代码中，您正在制作一个饼图……而您设置的数据似乎是错误的 .data(d3.values(dataset)) 我相信您想要做几个星期的甜甜圈和其他三个月的甜甜圈

标签： javascript arrays json d3.js graph

【解决方案1】：

你是这样设置数据的

.data(d3.values(dataset))

由于你的数据集有两个数组，并不代表它会画两个圆环图。

您需要明确指定两个数组中的哪一个将形成内部圆环图，哪一个将形成外部圆环图。

对于第一个圆环图，您必须像这样设置数据：

.data(pie(dataset.weeks))//dataset for weeks

对于第二个圆环图，您必须像这样设置数据：

.data(pie(dataset.trimester))//dataset for trimesters.

在您的情况下，您可以像这样定义 fie 函数：

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

应该是这样，缺少值函数，它告诉哪个值将形成饼图切片的标准。

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

工作代码here.

注意悬停时将显示文本。

【讨论】：