2

バックエンドに Ruby を使用して d3.js 散布図の視覚化を構築しています。私の Ruby コードが出力する x と y の値は、x と y の 2 つのベクトルで構成されています。

ベクトルから直接散布図としてドットをプロットする簡単な方法はありますか? 私は d3 を初めて使用するので、Scott Murray のチュートリアルを参考にして散布図を作成していますが、彼は x と y ベクトルの代わりに値のペアの配列を使用しています。

私はこれをやってみましたが、うまくいかないようです

svg.selectAll("one_circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("class", "datapoint")
    .attr("cx", function(d){
        return xscale(x[d]);
        })
    .attr("cy", function(d){
        return yscale(y[d]);
        })
    .attr("r", 2);

ありがとう！

4

1 に答える 1

3

コード スニペットに何が含まれているかは明確ではありませんがdataset、x と y が言及したベクトルであると仮定すると、これは機能するはずです。

svg.selectAll("circle.datapoint")
    .data(d3.zip(x,y))
    .enter()
    .append("circle")
    .attr("class", "datapoint")
    .attr("cx", function(d){
        return xscale(d[0]);
    })
    .attr("cy", function(d){
        return yscale(d[1]);
    })
    .attr("r", 2);

d3.zip が行うことは、N 個の配列 (最も短いものは M 要素の長さ) を取り、各入力配列の対応する要素を使用して、N 個の要素配列の M 要素配列を作成することです。たとえば、d3.zip を呼び出したときに、入力配列 x と y が次のようになったとします。

x = [1,2,3,4];
y = [5,6,7,8];

d3.zip(x,y) からの出力は次のようになります。

[[1,5],[2,6],[3,7],[4,8]]

4 つの円を配置するために必要なものです。また、作成している要素に合わせて要素セレクターを変更しました...

x と y を別の配列に圧縮せずに直接アクセスしたい場合は、これを行うことができますが、これは少しハックです:

svg.selectAll("circle.datapoint")
    .data(x.length < y.length ? x : y)
    .enter()
    .append("circle")
    .attr("class", "datapoint")
    .attr("cx", function(d, i){
        return xscale(x[i]);
    })
    .attr("cy", function(d, i){
        return yscale(y[i]);
    })
    .attr("r", 2);

ここでは、描画する円の数を制御するために x と y の短い方を使用し、どの円が描画されているかを示す attr コールバックへの 2 番目の i パラメータを使用して x と y に直接インデックスを付けています。

于 2013-07-26T02:45:24.783 に答える