d3 loop

by Arthur Tarasov

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<script>

	var margin = {top: 30, right: 20, bottom: 30, left: 50},
	    width = 550 - margin.left - margin.right,
	    height = 270 - margin.top - margin.bottom;

	var x = d3.scaleLinear().range([0, width]);
	var y = d3.scaleLinear().range([height, 0]);

	var xAxis = d3.axisBottom().scale(x);
	var yAxis = d3.axisLeft().scale(y);

	var svg = d3.select("body")
	    .append("svg")
	        .attr("width", width + margin.left + margin.right)
	        .attr("height", height + margin.top + margin.bottom)
	    .append("g")
	        .attr("transform", 
	              "translate(" + margin.left + "," + margin.top + ")");



	var lines = [];
  
  //----------------------
  //This loop doesn't work
  //----------------------
	for (zzz = 0; zzz < 3; zzz++) {
			lines = d3.line()
			  .x(function(d,i) { console.log(zzz); x([1,2,3]) })
				.y(function(d,i) { console.log(zzz); y([1,2,3]) });
	}


	svg.append("path")
        .attr("class", "line")
        .attr("d", lines([1,2,3]))
        .style("stroke", "orange");


</script>
</body>