D3 Legends在底部不可见

Question

我试图将传奇推到svg图表的底部。但是当我试图操纵图例的x和y位置时，完整的图形不会出现。 D3 Js给出了一个未定义的错误。请查找内联代码。请向我解释如何将图例放在图表的底部。提前谢谢。

var colorRange = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", 
"#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", 
"#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", 
"#3b3eac"];
 var data = [{"name" : "PQR", "percent" : "33.33"},..}]

        // the D3 bits...
        var color = d3.scale.category10();
        var width = 300;
        var height = 700;
        var pie = d3.layout.pie().value(function(d) {
            return d.percent
        }).sort(null).padAngle(.03);
        var arc = d3.svg.arc()
            .outerRadius(width / 2 * 0.9)
            .innerRadius(width / 2 * 0.5);
        var svg = d3.select(element[0]).append('svg')
            .attr({
                width: width,
                height: height
            })
            .append('g')
            .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

        var path = svg.selectAll('path').data(pie(data)) // our data
            .enter().append('path')
            .style('stroke', 'white')
            .attr('d', arc)
            .attr('fill', function(d, i) {
                return color(d.data.name)
            });

        path.transition()
            .duration(1000)
            .attrTween('d', function(d) {
                var interpolate = d3.interpolate({
                    startAngle: 0,
                    endAngle: 0
                }, d);
                return function(t) {
                    return arc(interpolate(t));
                };
            });

        var restOfTheData = function() {
            var text = svg.selectAll('text')
                .data(pie(data))
                .enter()
                .append("text")
                .transition()
                .duration(200)
                .attr("transform", function(d) {
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("dy", ".4em")
                .attr("text-anchor", "middle")
                .text(function(d) {
                    return d.data.percent + "%";
                })
                .style({
                    fill: '#fff',
                    'font-size': '12px'
                });

            var legendRectSize = 20;
            var legendSpacing = 20;

            var legend = d3.select('svg')                           
                        .selectAll("g")
                        .data(color.domain())
                        .enter()
                        .append('g')
                          .attr('class', 'legend')                           
                          .attr('transform', function(d, i) {
                            var height = legendRectSize;
                            var x = 0;
                            var y =  i * height;
                            return 'translate(' + x + ',' + y + ')';
                        });

            legend.append('rect')
                .attr('width', legendRectSize)
                .attr('height', legendRectSize)
                .style('fill', color)
                .style('stroke', color);

            legend.append('text')
                .attr('x', legendRectSize + legendSpacing)
                .attr('y', legendRectSize - legendSpacing)
                .text(function(d) { return d; });
        }
        setTimeout(restOfTheData, 1000);