Question

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

假设我有2个数据集，

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);
}

并从数组中拉回数据以使用

进行绘制

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

但是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>

您还可以在http://jsfiddle.net/agadoo/JDtqf/

上看到此代码的示例

Answer 1

您的代码存在两个问题。首先（这会导致您看到的行为），您将覆盖创建点的循环中的同一对象。因此，您最终会在数组中多次使用完全相同的对象，并且循环的每次迭代都会更改它。您在循环中生成的输出将打印正确的值，因为您在下一次迭代之前打印将覆盖该对象。通过在循环内移动point的声明，可以轻松解决这个问题。

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

我已根据所做的更改更新了您的js fiddle here。

从2个数据集中绘制路径

1 个答案: