Question

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

这是一年四季的表现，用固定标签下面的颜色表示，表明一年中的每个月（在图像中，它们会缩小到几个月，我不希望这种情况发生在圆环图中我试图创造）。

现在我想我开始在D3js页面上跟随example圆环图，然后添加某种固定标签。在达到这一点之前，我发现自己陷入困境，无法复制这个例子。

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

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

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

.append(g)

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

Answer 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很少。