0

現在のデータに応じて、d3.jsで新しい要素を追加または挿入することは可能ですか?

達成したいことを示すために例をまとめました

http://jsfiddle.net/DorjeDuck/uDBau/

基本的に、新しい赤い円は常にすべての青い円の上に描かれ、新しい青い円は常にすべての赤い円の下に置かれます。

これは、これまでのところ、データ セットをフィルタリングすることによって実現されています (d3 フィルターではなく、JavaScript 配列フィルター)。フィルター機能:

var selectNewOnesByColor = function (selection, color) {
    return selection.data(data.filter(function (d) {
        return d.color === color;
    }), function (d) {
        return d.id;
    })
        .enter();
}

続いて、一方のサブセットに円が追加され、もう一方のサブセットに挿入されます。これは機能しますが、これを達成するためのより直接的な方法があるかどうか疑問に思っていました。

ありがとう

マーティン

4

1 に答える 1

1

データをフィルタリングして 2 つの異なる入力選択を実現するアプローチは正しい方法だと思います。これはまさにこのトピックに関するスレッドです (他の 2 つの興味深いスレッドにリンクしています): https://groups.google.com/forum/#!msg/d3-js/PKsknGxmZ8g/ULxwneU00J4J .

selection.selectサブスレッドの 1 つに、新しく追加または挿入されたノードを返す関数での使用を示す例があります。これは実際に内部で実装されている方法selection.appendでselection.insertあるため、ノードの作成を単一のデータバインドパスに統合したい場合は、これを強力に使用できます。関数は現在のデータを受け取り、選択要素のノードとして返されたノードを使用します。

しかし、プレフィルタリングで行っていることはより簡単だと思います。

于 2013-10-18T19:09:46.730 に答える