基于具有固定标签的季节的 D3 甜甜圈图

Question

在使用 D3 成功创建了一些图表后，我现在正在尝试为地图创建图例，如下所示：

这是一年四季的代表，用固定标签下方的颜色表示一年中的每个月（在图像中它们被四舍五入到月，我不希望这种情况发生在我正在尝试创建圆环图）。

现在我想我应该从关注 D3js 页面上的圆环图 example 开始，然后再添加某种固定标签。在达到这一点之前，虽然我发现自己陷入困境并且无法复制该示例。

我已经尝试使用 Plunkr here, and I'm wondering if anyone would take a look. I've followed an approach outlined here 制作一个简洁的示例，将创建的对象用作数据输入，我还没有发现任何问题，但也许我错了。我收到的错误消息如下：

Uncaught TypeError: Cannot read property 'indexOf' of undefined: Main.js(1494)

第1494行对应Plunkr上的第37行，阅读：

.append(g)

这让我相信当我将 d3 指向数据时出现了问题，但我不确定这是什么。我会很感激有一双新的眼睛看着它！

Answer 1

您有几个问题：

首先，您忘记在 copying/pasting Bostock 的示例之后更改 population。我将其更改为 dur:

var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
  return d.dur
});

之后，我不得不更改你的数据：

  var data = [
{ seizoen: "lente", dur: 60 }, 
{ seizoen: "zomer", dur: 122 },
{ seizoen: "herfst", dur: 61 },
{ seizoen: "winter", dur: 122 }
];

此外，您忘记使用 # 来 select div 的 ID:

 var svg = d3.select("#legend").append("svg")

顺便说一句，您 jquery 的路径不正确，并且 CSS 中的#legend 非常少。

现在你有一个甜甜圈：http://plnkr.co/edit/B2CJMN7Wy1By0jlMpkii?p=preview

基于具有固定标签的季节的 D3 甜甜圈图

D3 donut chart based on seasons with fixed labels

javascript

d3.js

legend

donut-chart