d3.js: обновление и переход по оси X на основе строк из CSV-файла - PullRequest
Новая
       20

d3.js: обновление и переход по оси X на основе строк из CSV-файла

0 голосов
/ 23 мая 2019 

<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 в другом проекте.Но я сталкиваюсь с проблемами с обновлением данных оси.

Обновление оси должно быть немного другим.

Обратите внимание, что оно прекрасно работает до // ОБНОВЛЕНИЕ И ЧАСТЬ перехода <1014 * <p>Здесьявляется верхней верхней частью файла data1.csv: 

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

Любая помощь будет высоко ценится. Спасибо заранее!Плюс, консоль не показывает никаких ошибок.

...