javascript - 将图例添加到绘图 - d3

Question

绘制圆环图后，我尝试根据以下示例添加一些图例:

http://bl.ocks.org/ZJONSSON/3918369

但是，我收到此错误:

TypeError: undefined is not an object (evaluating 'n.apply')

我已经打印了第 131 行的返回值，并打印了所有图例名称。我不知道是什么导致了未定义的错误打印。

这是我的主要代码:

var width = 300,
  height = 300,
  radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
  .range(colorrange);

var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(radius - 70);

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

var svg = d3.select("#info").attr("align", "center").append("svg")
  .attr("class", "piechart")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "arc");

g.append("path")
  .attr("d", arc)
  .attr("data-legend", function(d) {
    return d.data.name;
  })
  .style("fill", function(d, i) {
    return color(i);
  });

g.append("text")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".35em")
  .text(function(d) {
    return d.data.label;
  });

legend = svg.append("g")
  .attr("class", "legend")
  .attr("transform", "translate(50,30)")
  .style("font-size", "12px")
  .call(d3.legend)

这是一个最小的例子:

https://jsfiddle.net/g6vyk7t1/12/

Answer 1

您需要上传代码http://bl.ocks.org/ZJONSSON/3918369#d3.legend.js Javascript 中的图例(只需复制并粘贴代码，它是函数 d3.legend)。