将d3v3甜甜圈图更新为d3v4后缺少切片

Question

我通常对d3不熟悉，所以请多多包涵。我尽力研究了我需要使用d3v4的过渡d3甜甜圈图的修复程序，但无济于事。这个想法最初来自here，我已经知道this chart对于d3v3来说显示得很好。更新以使相同的图表在here的v4中工作后，它无法正确显示，我很困惑。我已经在寻找答案，但是找不到我需要的东西。我认为问题是由于插值引起的，但不确定。任何帮助将不胜感激，并在此先感谢。

我的d3v4图表代码也在下面。

datasetOption1 = [
	{label: "Tropical Cyclone", value: 592319},
	{label: "Drought", value: 76713},
	{label: "Flooding", value: 36891}];

datasetOption2 = [
	{label: "Tropical Cyclone", value: 1992},
	{label: "Drought", value: 2416},
	{label: "Severe Storm", value: 498},
	{label: "Winter Storm", value: 457}];

	d3.selectAll("input").on("change", selectDataset); 
		
	var svg = d3.select("body")
		.append("svg")
		.append("g")

	svg.append("g")
		.attr("class", "slices");
	svg.append("g")
		.attr("class", "labelName");
	svg.append("g")
		.attr("class", "lines");

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

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

	var arc = d3.arc()
		.outerRadius(radius * 0.8)
		.innerRadius(radius * 0.4);

	var outerArc = d3.arc()
		.innerRadius(radius * 0.9)
		.outerRadius(radius * 0.9);

	var tooltip = d3.select("body").append("div").attr("class", "toolTip");

  svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var color = d3.scaleOrdinal(d3.schemeCategory20);
	
	change(datasetOption1);
	
  d3.select("input[value=\"option1\"]").property("checked", true);	
		
	function selectDataset()
	{
		var value = this.value;
		if (value == "option1")
		{
			change(datasetOption1);
		}
		else
		{
			change(datasetOption2);
		}
	}		
		
	function change(data) {
		/* ------- PIE SLICES -------*/
		var slice = svg.select(".slices").selectAll("path.slice")
			.data(pie(data), function(d){ 
				return d.data.label });

		slice.enter()
			.insert("path")
			.style("fill", function(d) { return color(d.data.label); })
				.style("opacity", 0.7)
			.attr("class", "slice");

		slice
			.transition().duration(1000)
			.attrTween("d", function(d) {
				var node = this;
				node._current = node._current || d;
				var interpolate = d3.interpolate(node._current, d);
				node._current = interpolate(0);
				return function(t) {
					return arc(interpolate(t));
				};
			})
		slice
			.on("mousemove", function(d){
				tooltip.style("left", d3.event.pageX+10+"px");
				tooltip.style("top", d3.event.pageY-25+"px");
				tooltip.style("display", "inline-block");
				tooltip.html((d.data.label)+"<br>"+(d.data.value));
			});
		slice
			.on("mouseout", function(d){
				tooltip.style("display", "none");
			});

		slice.exit()
			.remove();

		/* ------- TEXT LABELS -------*/

		var text = svg.select(".labelName").selectAll("text")
			.data(pie(data), function(d){ return d.data.label });

		text.enter()
			.append("text")
			.attr("dy", ".35em")
			.text(function(d) {
				return (d.data.label+": "+d.value);
			});

		function midAngle(d){
			return d.startAngle + (d.endAngle - d.startAngle)/2;
		}

		text
			.transition().duration(1000)
			.attrTween("transform", function(d) {
				var node = this;
				node._current = node._current || d;
				var interpolate = d3.interpolate(node._current, d);
				node._current = interpolate(0);
				return function(t) {
					var d2 = interpolate(t);
					var pos = outerArc.centroid(d2);
					pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
					return "translate("+ pos +")";
				};
			})
			.styleTween("text-anchor", function(d){
				var node = this;
				node._current = node._current || d;
				var interpolate = d3.interpolate(node._current, d);
				node._current = interpolate(0);
				return function(t) {
					var d2 = interpolate(t);
					return midAngle(d2) < Math.PI ? "start":"end";
				};
			})
			.text(function(d) {
				return (d.data.label+": "+d.value);
			});

		text.exit().remove();

		/* ------- SLICE TO TEXT POLYLINES -------*/
		var polyline = svg.select(".lines").selectAll("polyline")
			.data(pie(data), function(d){ return d.data.label });

		polyline.enter()
			.append("polyline");

		polyline.transition().duration(1000)
			.attrTween("points", function(d){
				var node = this;
				node._current = node._current || d;
				var interpolate = d3.interpolate(node._current, d);
				node._current = interpolate(0);
				return function(t) {
					var d2 = interpolate(t);
					var pos = outerArc.centroid(d2);
					pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
					return [arc.centroid(d2), outerArc.centroid(d2), pos];
				};
			});

		polyline.exit()
			.remove();
	};
	

	body {
	  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	  width: 960px;
	  height: 500px;
	  position: relative;
	}

	svg {
		width: 100%;
		height: 100%;
	}

	path.slice{
		stroke-width:2px;
	}

	polyline{
		opacity: .3;
		stroke: black;
		stroke-width: 2px;
		fill: none;
	}

	.labelValue{
		font-size: 60%;
		opacity: .5;		
	}

	.toolTip {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		position: absolute;
		display: none;
		width: auto;
		height: auto;
		background: none repeat scroll 0 0 white;
		border: 0 none;
		border-radius: 8px 8px 8px 8px;
		box-shadow: -3px 3px 15px #888888;
		color: black;
		font: 12px sans-serif;
		padding: 5px;
		text-align: center;
	}
	
	text {
	  font: 12px sans-serif;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<body>

  <form>
    <label><input type="radio" name="dataset" id="dataset" value="option1"> Option 1</label>
    <label><input type="radio" name="dataset" id="dataset" value="option2"> Option 2</label>
  </form>
  <br>
  
</body>