0

d3で視覚化するためのデータセットを準備するためにループを使用しようとしましたが、ループからデータを取得するときに問題が発生しました。

2つのデータセットがあるとしましょう。

setX = [1,2、3、4、5]およびsetY = [10、20、30、40、50]

そして、2つのデータセットから座標xとyの配列を取得するためのforループを作成します。

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/にもあります。

4

1 に答える 1

1

コードには 2 つの問題があります。まず (これにより、表示される動作が発生します)、ポイントを作成するループ内で同じオブジェクトを上書きしています。したがって、配列内でまったく同じオブジェクトが数回発生し、ループの反復ごとにオブジェクトが変更されます。次の反復でオブジェクトが上書きされる前に出力しているため、ループ内で生成している出力には正しい値が出力されます。pointこれは、ループ内の宣言を移動することで簡単に修正されます。

2 番目の問題は実際の問題ではなく、スタイルの問題です。必要な場所にデータを渡すだけで、d3 を使用しているのと同じように使用できます。より良い方法は、データを渡す場所で d3s セレクションを使用し、それをどう処理するかを指示することです。

これらの変更を加えて、こちらの js フィドルを更新しました。

于 2013-02-09T11:41:59.747 に答える