Добавление легенды для построения - d3

Question

После построения диаграммы пончик, я пытаюсь добавить легенду, основываясь на следующем примере:

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

Однако, я получаю эту ошибку:

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

Я напечатал возврат строки 131 и все названия легенд напечатаны. Я не знаю, что вызывает печать undefined error.

Это мой основной код:

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.