d3.js饼图<path>属性的值无效

Question

我更倾向于d3.js并且遇到错误，我根据自己的需要定制了示例，但是在控制台中获取了这些示例。请帮忙。先谢谢你。

Error: Invalid value for <path> attribute d="M-1.8369701987210297e-14,-100A100,100 0 1,1 NaN,NaNLNaN,NaNA60,60 0 1,0 -1.1021821192326178e-14,-60Z"a @ d3.v3.min.js:1
d3.v3.min.js:1 Error: Invalid value for <path> attribute d="MNaN,NaNA100,100 0 1,1 NaN,NaNLNaN,NaNA60,60 0 1,0 NaN,NaNZ"

＆＃13;

＆＃13;

	var getData = function () {
		var size = 3;
		var data =[];
		var text = "";

		data=[
			{
				label:"Saved",
				value:200,
			},{
				label:"Ordered",
				value:1255,
			},{
				label:"Shipped",
				value:760,
			},{
				label:"Backordered",
				value:150,
			},
			{
				label:"Cancelled",
				value:250,
			},
		];
		d3.select("#data").html(text);
		return data;
	};


	console.log(getData());

	var chart = donut(250,200,16,40)
		.$el(d3.select("#chart"))
		.data(getData())
		.render();
	d3.select("#refresh").on("click", function () {
		chart.data(getData()).render();
	});


	function donut(width,height,label_font_size,value_font_size) {
		// Default settings
		var $el = d3.select("body")
		var data = {};
		// var showTitle = true;
		var width = width,
			height = height,
			radius = Math.min(width, height) / 2;

		//var arc = d3.svg.arc().outerRadius(radius);
		var arcOver = d3.svg.arc()
        .innerRadius(radius + 20);

		var currentVal;
		var color = d3.scale.category20();
		var pie = d3.layout.pie()
			.sort(null)
			.value(function (d) {
				console.log(d);
				return d.value.value;
			});

		var svg, g, arc;


		var object = {};

		// Method for render/refresh graph
		object.render = function () {
			if (!svg) {
				arc = d3.svg.arc()
					.outerRadius(radius)
					.innerRadius(radius - (radius / 2.5));

				svg = $el.append("svg")
					.attr("width", width)
					.attr("height", height)
					.append("g")
					.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

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

				g.append("path")
					// Attach current value to g so that we can use it for animation
					.each(function (d) {
						//this._current = d;
					})
					.attr("d", arc)
					.style("fill", function (d,i) {
						return color(i);
					});

				/*g.append("text")
					.attr("transform", function (d,i) {
						return "translate(" + arc.centroid(d,i) + ")";
					})

					.attr("dy", ".35em")
					.style("text-anchor", "middle");
				g.select("text").text(function (d) {
					//return d.data.key;
				});
				*/

				svg.append("text")
					.datum(data)
					.attr("x", 0)
					.attr("y", 0)
					.attr("class", "text-tooltip")
					.style("text-anchor", "middle")
					.attr("font-weight", "bold")
					.style("font-size", radius / 2.5 + "px");

				g.on("mouseover", function (obj) {


					var tooltipText=svg.select("text.text-tooltip");
						tooltipText.attr("fill", function (d,i) {
							return color(i);
						});

					tooltipText.append("tspan")
    				.attr("dy", -15)
    				.attr("x",0)
					.attr("class", "text-tooltip-label")
					.style("font-size", label_font_size + "px")
    				.text(function(d) {return d[obj.data.key].label;});

    				tooltipText.append("tspan")
					.attr("dy", ".9em") // offest by 1.2 em
    				.attr("x",0)
					.attr("class", "text-tooltip-value")
					.style("font-size", value_font_size + "px")
    				.text(function(d) {return d[obj.data.key].value;});
					 d3.select(this)
               .attr("stroke","white")
               .transition()
               .duration(1000)
               .attr("d", arcOver)
               .attr("stroke-width",6);


				});

				g.on("mouseout", function (obj) {
					svg.select("text.text-tooltip").text("");
					 d3.select(this).transition()
               .attr("d", arc)
               .attr("stroke","none");
				});

			} else {
				g.data(pie(d3.entries(data))).exit().remove();

				g.select("path")
					.transition().duration(200)
					.attrTween("d", function (a) {
						var i = d3.interpolate(this._current, a);
						this._current = i(0);
						return function (t) {
							return arc(i(t));
						};
					});


				g.select("text")
					.attr("transform", function (d,i) {
						return "translate(" + arc.centroid(d,i) + ")";
					});

				svg.select("text.text-tooltip").datum(data);
			}
			return object;
		};

		// Getter and setter methods
		object.data = function (value) {
			if (!arguments.length) return data;
			data = value;
			return object;
		};

		object.$el = function (value) {
			if (!arguments.length) return $el;
			$el = value;
			return object;
		};

		object.width = function (value) {
			if (!arguments.length) return width;
			width = value;
			radius = Math.min(width, height) / 2;
			return object;
		};

		object.height = function (value) {
			if (!arguments.length) return height;
			height = value;
			radius = Math.min(width, height) / 2;
			return object;
		};

		return object;
	};

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>

＆＃13;

＆＃13;

＆＃13;