基于带有固定标签的季节的 D3 甜甜圈图答案

【问题标题】：D3 donut chart based on seasons with fixed labels基于带有固定标签的季节的 D3 甜甜圈图
【发布时间】：2016-08-24 08:11:54
【问题描述】：

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

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

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

我尝试使用 Plunkr here 制作一个简洁的示例，我想知道是否有人会看一看。我已经按照here 概述的方法使用创建的对象作为数据输入，我还没有发现任何问题，但也许我弄错了。我得到的错误信息如下：

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

第 1494 行对应 Plunkr 上的第 37 行，内容如下：

.append(g)

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

【问题讨论】：

【解决方案1】：

你有几个问题：

首先，您在复制/粘贴 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 }
];

另外，你忘了用#来选择div的ID：

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

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

【讨论】：

叹息，这已经是漫长的一周了。感谢您的帮助！我什至在我的编辑器中评论了“人口”部分进行更改。
不用担心。我不使用jquery，所以我只是复制了我在cdnjs 找到的第一个路径。另外，我将 CSS 中的#legend 更改为以像素为单位的固定值，您可能也想更改它。干杯。
不是在实际产品中，但在 plunkr 中更好，是的，再次感谢。你知道从哪里开始为这个东西添加固定标签吗？在谷歌上快速搜索只能将这个问题作为答案，但也许我的方向是错误的。
“固定标签”是什么意思？
在开篇的示例中，我将月份的第一个字母（以及白色线条）视为固定标签，类似于条形图上的固定刻度，它们必须始终相同，而季节可能因图表而异。