javascript - Drawing path from 2 dataset -

javascript - Drawing path from 2 dataset -

i have been trying utilize loop in order prepare dataset visualization d3 got problem when getting info loop.

let's have 2 info set,

setx = [1,2 ,3, 4, 5] , sety = [10, 20, 30, 40, 50]

and create loop array of coordinate x , y 2 dataset.

var point = new object(); var coordinate = new array(); for(var i=0; < setx.length;i++){ point.x = setx[i]; point.y = sety[i]; coordinate.push(point); }

and pulling info array draw with

var d3line = d3.svg.line() .x(function(d){return d.x;}) .y(function(d){return d.y;}) .interpolate("linear");

but value of x , y info of d3line(coordinate) 5 , 50. there right way prepare this?

here illustration of code

<div id="path"></div> <script> var divelem = d3.select("#path"); canvas = divelem.append("svg:svg") .attr("width", 200) .attr("height", 200) var setx = [1,2 ,3, 4, 5]; var sety = [10, 20, 30, 40, 50]; var point = new object(); var coordinate = new array(); for(var i=0; < setx.length;i++){ point.x = setx[i]; point.y = sety[i]; coordinate.push(point); } var d3line = d3.svg.line() .x(function(d){return d.x;}) .y(function(d){return d.y;}) .interpolate("linear"); canvas.append("svg:path") .attr("d", d3line(coordinate)) .style("stroke-width", 2) .style("stroke", "steelblue") .style("fill", "none"); </script>

you see illustration of code on http://jsfiddle.net/agadoo/jdtqf/

there 2 problems code. first (and causes behaviour see), you're overwriting same object in loop creates points. end same object several times in array , each iteration of loop changes it. output you're producing within loop prints right values because you're printing before next iteration overwrites object. fixed moving declaration of point within loop.

the sec problem isn't problem more of style issue. can utilize d3 in way you're using passing info in need it. improve way utilize d3s selections pass in info , tell it.

i've updated js fiddle here changes made.

javascript d3.js