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

Posted 2021-05-05

我一直在尝试使用以下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。

关于悬停的注意事项将显示文本。