D3 Uncaught TypeError：path.data 不是函数答案

【问题标题】：D3 Uncaught TypeError: path.data is not a functionD3 Uncaught TypeError：path.data 不是函数
【发布时间】：2016-04-14 12:46:25
【问题描述】：

我是 D3.js 的新手，对于一个项目，我需要使用每 2 秒更改一次的数据制作一个甜甜圈。但是每次我尝试更改数据时都会出现错误：

未捕获的类型错误：path.data 不是函数

我用this code作为change函数的例子

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3 donuttest</title>
	<script src="//d3js.org/d3.v3.min.jss"></script>	
	<style>

		body {
		  font: 10px sans-serif;
		}
	</style>
</head>
<body>
</body>
	<div id="chartwrapper">
		
	</div>
</body>
<script>
	var wrapper="#chartwrapper";
	var dummydata=70;
	var data=[dummydata,100-dummydata];
	var width = 460,
	    height = 300,
	    radius = Math.min(width, height) / 2;

	var color = d3.scale.category20();

	var pie = d3.layout.pie()
	    .sort(null);

	var arc = d3.svg.arc()
	    .innerRadius(radius - 100)
	    .outerRadius(radius - 50);

	var svg = d3.select(wrapper).append("svg")
	    .attr("width", width)
	    .attr("height", height)
	    .append("g")
	    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var path = svg.selectAll("path")
	    .data(pie(data))
	  	.enter().append("path")
	    .attr("fill", function(d, i) { return color(i); })
	    .attr("d", arc)
	    .transition()
	    .ease("bounce")
    	.duration(1000)
    	.attrTween("d", initTween);
     var label=svg.append("g")
    .attr("class", "display")
    .attr("transform", "translate(-30,10)");
var labeltext=label.append("text")
    .attr("font-size","2rem")
    .text(dummydata + "%");
   	function change(data){
   		labeltext.text(data[0] + "%");
   		path.data(pie(data));
   		path.transition().duration(750).attrTween("d",arcTween);
   	};
    //animation tween for when graph is drawn
	function initTween(b) {
		  b.innerRadius = 0;
		  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
		  return function(t) { return arc(i(t)); };
	}
	//animation for when data is changed
	function arcTween(a) {
	  	var i = d3.interpolate(this._current, a);
	  	this._current = i(0);
	  	return function(t) {
	  		return arc(i(t));
	  	};
	};
	//simulating data changes
	setInterval(function() {
	   dummydata = parseInt(Math.random() * 100);
	   data=[dummydata,100-dummydata];
	   console.log(data)
		change(data);
	},2000);


</script>

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

这里对您的代码稍作修改，可能会对您有所帮助。我以this answer 为指导。

修改包括：

只将append()的结果存储在path变量中；
首次绘制图表时，将初始角度存储在_current 中，而不是使用initTween 函数。

var wrapper = "#chartwrapper";
var dummydata = 70;
var data = [dummydata, 100 - dummydata];

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

var color = d3.scale.category20();

var arc = d3.svg.arc()
  .outerRadius(radius - 100)
  .innerRadius(radius - 50);

var pie = d3.layout.pie()
  .sort(null);

var svg = d3.select(wrapper).append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
  .data(pie(data))
  .enter()
  .append("path");

path.attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc)
  .transition()
  .ease("bounce")
  .duration(1000)
  .each(function(d) {
    this._current = d;
  }); // store the initial angles

var label = svg.append("g")
  .attr("class", "display")
  .attr("transform", "translate(-30,10)");

var labeltext = label.append("text")
  .attr("font-size", "2rem")
  .text(dummydata + "%");

function change(data) {
  labeltext.text(data[0] + "%");
  path.data(pie(data));
  path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs

}

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

setInterval(function() {
  dummydata = parseInt(Math.random() * 100);
  data = [dummydata, 100 - dummydata];
  console.log(data)
  change(data);
}, 2000);

body {
  font: 10px sans-serif;
}

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

【讨论】：