4

私は、d3を使用してページにいくつかの新しいdivを配置し、属性を追加し、データ駆動型スタイルを追加する単純なd3の例に取り組んでいます。私をつまずかせているのは、d3を使用して新しいデータを使用していくつかのスタイルを更新したいときです。以下のjsFiddle（http://jsfiddle.net/MzPUg/15/）からコードを貼り付けました。

最初にdivを作成するステップでは、キー関数を使用して要素にインデックスを追加し、更新ステップ（機能していない部分）でもキー関数を使用します。しかし、d3のドキュメントから明らかでないのは、実際のデータ結合がどのように機能するかです（たとえば、インデックスはDOM要素のどこに格納されているのか、重複するインデックスがある場合はどうなるのかなど）。

ですから、私の知識には明らかなギャップがありますが、ここでそれを単純に保つことで、この例が機能しない理由を誰かが明らかにすることができますか？d3でのデータ結合の正確な性質に関する追加情報は、ケーキのフロスティングになります。（私はすでにhttp://bost.ocks.org/mike/join/を見ました。）

//add a container div to the body and add a class
var thediv = d3.select("body").append("div").attr("class","bluediv");

//add six medium-sized divs to the container div
//note that a key index function is provided to the data method here
//where do the resulting index value get stored?
var mediumdivs = thediv.selectAll("div")
    .data([10,50,90,130,170,210],function(d){return d})
    .enter().append("div")
    .style("top",function(d){return d + "px"})
    .style("left",function(d){return d + "px"})
    .attr("class","meddiv")

//UPDATE STEP - NOT WORKING
//Attempt to update the position of two divs
var newdata = [{newval:30,oldval:10},{newval:80,oldval:50}]        
var mediumUpdate = mediumdivs.data(newdata,function(d){return d.oldval})
    .style("left",function(d){return d.newval + "px"})
4

3 に答える 3

1

私の知る限り、既存の要素を更新することはありません。代わりに、描画する要素をD3に指示し、画面上で何を削除または更新するかを決定します。

JSFiddleを動作するコードで更新しました。以下のコードも追加しました。

//add a container div to the body and add a class
var thediv = d3.select("body").append("div").attr("class", "bluediv");

function update(data) {
    var mediumdivs = thediv.selectAll("div").data(data, function(d) {
        return d;
    });

    // Tell D3 to add a div for each data point.
    mediumdivs.enter().append("div").style("top", function(d) {
        return d + "px";
    }).style("left", function(d) {
        return d + "px";
    }).attr("class", "meddiv")
    // Add an id element to allow you to find this div outside of D3.
    .attr("id", function(d) { 
        return d;
     });

    // Tell D3 to remove all divs that no longer point to existing data.
    mediumdivs.exit().remove();   
}

// Draw the scene for the initial data array at the top.           
update([10, 50, 90, 130, 170, 210]);      
// Draw the scene with the updated array.
update([30, 80, 90, 130, 170, 210]);

D3がインデックスを格納する方法の内部動作についてはわかりませんが、id作成したdivに属性を追加して、独自のインデックスを作成することができます。

于 2012-07-18T18:00:40.493 に答える
0

上記の回答では、同じキーを持つdivを移行するために更新手順が必要です。更新機能の有無にかかわらず何が起こるかを示す 例示的なjsfiddle 。

更新関数は、selection.enter（）。stuffではなく単なるselection.stuffです。

//add a container div to the body and add a class
var updateDiv = d3.select("#updateDiv").attr("class", "bluediv");
var noUpdateDiv = d3.select("#noUpdateDiv").attr("class", "bluediv");

function update(selection,data,zeroTop,withUpdate) {
    //add six medium-sized divs to the container div
    //note that a key index function is provided to the data method here
    //where do the resulting index value get stored?
    var mediumdivs = selection.selectAll("div").data(data, function(d) {
        return d;
    });

    if(withUpdate){
        mediumdivs.style("top", function(d) {
            if(zeroTop){
                return 0
            }else{
                return d + "px";
            }        
        }).style("left", function(d) {
            return d + "px";
        }).attr("class", "meddiv");
    }


    mediumdivs.enter().append("div").style("top", function(d) {
        if(zeroTop){
            return 0
        }else{
            return d + "px";
        }        
    }).style("left", function(d) {
        return d + "px";
    }).attr("class", "meddiv");

    mediumdivs.exit().remove();   
}
//with the update function we maintain 3 of the old divs, and move them to the top
update(updateDiv,[10, 50, 90, 130, 170, 210],false,true);      
update(updateDiv,[10,50,90],true,true);

//without the update function divs are maintained, but not transitioned
update(noUpdateDiv,[10, 50, 90, 130, 170, 210],false,false);      
update(noUpdateDiv,[10,50,90],true,false);
于 2015-03-29T22:47:31.103 に答える
0

これまでに与えられた他の答えは、divを削除して再作成する戦略を使用しています。これは必要ありません。Al R.の元のコードの問題は、dataキーの使用方法にありました。古いデータと新しく渡されたデータの両方に同じdataキー関数が使用されます。AlR。の例では、古いデータは単純な数値の配列であり、新しいデータはプロパティを持つオブジェクトの配列でした。 、行でデータが選択されていません。mediumUpdate

選択を機能させる1つの方法は次のとおりです。

var newdata = [10, 50];
var newdatamap = {10:30, 50:80};
var mediumUpdate = mediumdivs.data(newdata, function(d){return d;})
    .style("left",function(d){return newdatamap[d] + "px";});

これがjsfiddleです。これは、選択したdivの色も変更して、効果を明確にします。

于 2015-03-30T04:48:38.940 に答える