Javascript 从2数据集绘制路径

我一直在尝试使用loop来准备数据集，以便使用d3进行可视化，但在从loop获取数据时遇到了一些问题

假设我有两个数据集

setX=[1,2,3,4,5]和setY=[10,20,30,40,50]

我创建for循环，从2个数据集中获得坐标x和y的数组

var point = new Object();
var coordinate = new Array();
for(var i=0; i < setX.length;i++){
    point.x = setX[i];
    point.y = setY[i];
    coordinate.push(point);
}

但d3line（坐标）的x和y数据值始终为5和50。 有没有正确的方法来解决这个问题

下面是一个代码示例

<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; i < 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>

var divElem=d3。选择（“路径”）；
canvas=divElem.append（“svg:svg”）
.attr（“宽度”，200）
.attr（“高度”，200）
var setX=[1,2,3,4,5]；
var setY=[10,20,30,40,50]；
var point=新对象（）；
var坐标=新数组（）；
对于（变量i=0；i

---

您还可以在

上看到我的代码示例。您的代码有两个问题。首先（这会导致您看到的行为），您正在覆盖创建点的循环中的同一对象。因此，在数组中多次使用完全相同的对象，循环的每次迭代都会对其进行更改。在循环中生成的输出打印正确的值，因为您在下一次迭代覆盖对象之前打印。通过在循环内移动

点

的声明，可以很容易地解决这个问题

第二个问题不是真正的问题，而是风格问题。您当然可以按照使用d3的方式使用它，只需将数据传递到您需要的地方。一个更好的方法是使用d3s选择，但是在传递数据的地方，然后告诉它如何处理它

我已经用这些更改更新了你的js小提琴

<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; i < 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>