Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>d3.js Learning</title>
	
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/d3-marcon/build/d3-marcon.min.js"></script>
	
	<meta charset="utf-8">
</head>


<body>
<script>
	var width=500
	var height=500
	d3.csv("/data1.csv", function(error,data) {
		for (var i = 0; i < data.length; i++) {            
						data[i].jon=+data[i].jon
						data[i].pete=+data[i].pete
		}
		var svg = d3.select("body")
				.append("svg")
				.attr("width", width)
				.attr("height", height );
		
		//INITIAL AXIS
		var myData=[+data[1].jon,+data[1].pete]
		
		var x = d3.scaleLinear()
								.domain([d3.min(myData), d3.max(myData)])
								.range([0, width - 100])
		var x_axis = d3.axisTop()
								.scale(x);              
		var scaleCall=svg.append("g")
								.attr("class","x axis")
								.attr("transform", "translate(10, 50)")
								.call(x_axis);              

	//UPDATE AND Transition PART
	d3.csv("/data1.csv", function(error,data) {
		for (var i = 1; i < data.length; i++) {            
						data[i].jon=+data[i].jon
						data[i].pete=+data[i].pete
		var myData=[+data[1].jon,+data[1].pete]
		//console.log(myData);
		
		x.domain([d3.min(myData), d3.max(myData)]);
		
		
		svg.selectAll(".x.axis")
										.transition()
										.duration(1000)
										.ease(d3.easeLinear)
										//.delay(1000)
										.call(x_axis); 
		}
	});
								
	});
	
</script>
</body>
</html>

我能够从csv数据成功创建轴。但是，我无法更新/转换csv文件中其他行的轴。

两天以来，我一直在努力解决这一问题，但是即使阅读/观看了如此多的教程，我仍然找不到可行的解决方案。

堆栈溢出中的其他类似问题也没有帮助我。它们中的大多数不包含来自csv的数据，或者它们过旧或与轴无关。我还能够在其他项目中从csv更新条形图。但是我在更新轴数据时遇到了问题。

更新轴必须有所不同。

请注意，直到// UPDATE AND Transition PART

这是data1.csv文件的顶部：

Month,jon,pete
2012-02,0,1
2012-03,3,8
2012-04,1,9
2012-05,1,7

任何帮助将不胜感激。谢谢！另外，控制台不会显示任何错误。

d3.js：基于csv文件中的行的x轴更新和过渡

0 个答案: