0

私は D3 を学んでおり、おもちゃのアプリケーションはSymplectic Velocity Verlet Integrationを使用した 2 次元重力シミュレーションのビジュアライザーです。

バインドされた構造化データを使用してパスをアニメーション化および描画することにかなり成功しましたが、D3 は実際には複数の要素にデータを添付するようには設計されていないようです。任意のデータに対して、それを所有する明確で単純な SVG 要素があることを前提としています。これは__data__、DOM 内のプロパティ内にデータを直接格納することで明らかです。

ただし、複数の SVG 要素を持つデータを表す適切な方法は明らかではありません。たとえば、私は惑星ごとにパスと円を描きたいと思います。パスは過去の位置をトレースし (そして、巧妙な線の長さと色の補間を適用することができます)、円は現在の位置をプロットします。

描画したい要素をさらにいくつか考え出すこともできます: 速度用のベクトル矢印... 加速用のベクトル矢印...

私の場合、マスター データ構造は次のように構築され、この構造で動的に維持されます。

var data = [];
function makeParticle(x, y, vx, vy) {      
    // state vector plus goodies                 
    return [                               
        x, y,                              
        vx, vy,                            
        0, 0,                              
        [] // path                         
    ];                                     
}                                          
data.push(makeParticle(400, 100, -0.5, 1));
data.push(makeParticle(300, -100, 0.5, 2)); // and so on

データの各要素は惑星であり、現在の状態ベクトル (位置、速度、およびキャッシュされた加速度 (インテグレーターに必要)) と、かなり長い長さに切り詰められた位置の配列であるパス履歴を含みます。 .

現在、パス履歴を次のように更新しています。

var paths = d3.select('svg').selectAll("path").data(data);
paths.enter().append('path'); // put cool transitions here
paths.exit().remove();                                    

paths.attr("stroke", "red")                               
.attr("d", function(d){                                   
    return lineDrawer(d[6]);                              
})

これは正常に機能し、各パスは独自の惑星のパスの独自のコピーを追跡します。

これをエレガントに拡張して、各パスの先頭に円を含める方法はすぐにはわかりません。確かに、データ全体を円の DOM 要素に複製したくはありません (パス データは必要ないため)。

私の自己回答に照らして編集します。

誰かが「グループ」を使用して、各データムに対して描画するデータ駆動型のセットを作成する方法を解明するのを手伝ってくれることを願っています。たとえば[position, velocity, force, path]、円、矢印の閉じたパス、矢印の閉じたパス、開いたパスをそれぞれ使用して視覚化されたデータとして。これらのプロパティは固定されているため、これは完全に考えすぎである可能性もあります。

4

1 に答える 1

0

問題を考え抜く過程で、私がしなければならないことはデータを除外することだけであることが明らかになったと思います。そのためselectAll('circle.planet')、大量のパス履歴を含む完全なデータ値ではなく、位置状態データのみを添付します配列。このようにして、表示を担当するデータを正確に取得します。

サブセレクションについてもう少し読む必要があるようです（サブセレクションが階層の2次元に限定されている理由（またはもし）にほとんど困惑しています）が、これは完全に合理的です。データムごとに4つのアイテムを描画したい場合、データムの構造の正しいサブセットを各SVGビジュアライザー要素に何らかの方法で「割り当てる」必要があるだけです。

于 2013-10-04T01:27:25.467 に答える