0

我一直在尝试使用循环来准备数据集以使用 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(coordinate) 的 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/上看到我的此代码示例

4

1 回答 1

1

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

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

我已经用所做的这些更改更新了你的 js fiddle。

于 2013-02-09T11:41:59.747 回答