javascript - D3.js-从JSON创建多环甜甜圈图数据集

我一直在尝试通过使用以下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/-代码示例。

最佳答案

您正在像这样设置数据

.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。

悬停时，将显示文本。

关于javascript - D3.js-从JSON创建多环甜甜圈图数据集，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33988301/