D3未捕获类型错误:path.data不是函数

D3 Uncaught TypeError: path.data is not a function

本文关键字：data path 函数 错误 类型 D3      更新时间：2023-09-26

我是D3.js的新手，对于一个项目，我需要用每2秒更改一次的数据制作一个donutchart。但每次我试图更改数据时，我都会收到一个错误：

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

我用这个代码作为改变函数的例子

代码：

<!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>

这里对您的代码进行了一些小的修改，可能会对您有所帮助。我用这个答案作为指导。

修改包括：

  • 仅将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>

相关文章：