D3が間違ったデータを選択して終了する

Question

D3.jsを使用してリアルタイムグラフの種類を作成しようとしています。コードはhttps://plnkr.co/edit/hrawv8CTBIsJf2QWTBMb?p=previewにあります。

ソースデータは、異なる組織のユーザー認証結果を表します。各組織には、名前、OKカウント、失敗カウントがあります。グラフは、データに基づいて動的に更新する必要があります（ループ内のデータを取得する）。

コードはhttps://bl.ocks.org/mbostock/3808234に基づいています。

問題はほとんどなく、わからないことはほとんどありません。

exit関数は、データのみの更新に基づいて、赤いバーを選択：

// JOIN new data with old elements 
    // specify function for data matching - correct? 
    var boxes = svg.selectAll(".box").data(data, function(d) { 
    return d.inst_name; 
    }); 

    // EXIT old elements not present in new data 
    // this works somehow strange 
    // it does select all red boxes 
    boxes.exit().transition(t).remove(); 

なぜ終了（）赤いバーではなく、すべてのだけを選択していますか？私の理解のポイントから、d3のドキュメントexit（）は新しいデータを持たない要素だけを選択すべきです。無限ループと定数データファイルの場合、それはすべての棒でなければならないのですか？

これは明らかにグラフをかなり壊します（plunkerを参照）。データファイルでは利用できないバーのみを選択するには、出口が必要です。以下の例を参照してください。データファイルの

初期状態：intial状態からINST2用（青色と赤色の両方）のバーを除去（およびによって置換されるべき

inst_name,ok,fail 
inst1,26,-1 
inst14,22,-4 
... 

：

inst_name,ok,fail 
inst1,24,-1 
inst2,23,-3 
... 

は、データファイルの状態を更新しデータが更新されたときのinst14のデータ）。なぜこれは機能しないのですか？

私が読んだことは、新しいデータが古い使用インデックスと照合されていることです。私はINST_NAMEを使用することを指定した：

var boxes = svg.selectAll(".box").data(data, function(d) { 
    return d.inst_name; 
    }); 

は、この必要です（データを挿入するとき、私はどこでもそれを使用しましたか）？

また、要素を削除するための移行は機能しません。何が問題ですか？

私はまた、新しいバー追加するときに、データを指定する必要があるのか​​はわからない：助けを

var boxes = svg.selectAll(".box").data(data, function(d) { 
    return d.inst_name; 
    }); 

    ..... 

    // add new element in new data 
    svg.selectAll(".blue") 
    .data(data, function(d) { // is this necessary ? 
     return d.inst_name; 
    }) // use function for new data matching against inst_name, necessary? 
    .enter().append("rect") 
    .transition(t) 
    .attr("class", function(d) { 
     return "blue box " 
    }) 
    .attr("x", function(d) { 
     return x(d.inst_name); 
    }) 
    .attr("width", x.bandwidth()) 
    .attr("y", function(d) { 
     return y(d.ok); 
    }) 
    .attr("height", function(d) { 
     return height - y(d.ok + min); 
    }) 

感謝を。

EDIT

基礎となるデータは、（これは、オリジナルのポストに明確に書かれていませんでした）スクリプトによって変更を取得し、それはグラフの状態とは独立して変更することができます。データは増加するだけです。

Answer 1

あなたは多くの質問をしました。

exit（）はなぜ赤いバーのみを選択するのですか？私の理解のポイントから、d3のドキュメントexit（）は新しいデータを持たない要素だけを選択すべきです。無限ループと定数データファイルの場合、それはすべての棒でなければならないのですか？

最初に、2組のバー（青色[ok]と赤色[fail]）を作成します。これらのデータをバインドするときには、同じkey functionを指定します。これはinst_nameによって識別されます。

svg.selectAll(".box") 

データの更新は同じキー機能で再度バインドされます。あなたのデータは配列内に10個の値がありますが、20個のバーが選択されました。第10バールの出口（赤いもの）d3に彼らはあなたの10個のデータポイントではないので

intial状態からINST2用（青色と赤色の両方）のバーは除去（とのデータによって置換されるべきですデータが更新されると、データが更新されます。なぜこれは機能しないのですか？

あなたのプランナーでは、同じデータを何度も何度も繰り返しています。

また、要素を削除するための移行は機能しません。何が問題ですか？

あなたは何もすることはできません。それはそれを実行し、最後に矩形を削除します。あなたが必要とするものは、「高さ」のような、それが移行するものです。

boxes.exit().transition(t).attr('height', 0).remove(); 

これは、それらを0の高さに縮小します。

---

コードをクリーンアップするにはどうすればよいですか？

最初に、私はg要素で、それぞれデータ配列内の項目とペアになります。次に、両方のバーをそのデータポイントに属するgに配置します。見てくださいhere、私はあなたのコードをクリーンアップ（不完全な、しかし、うまくいけば、あなたが行く）を開始しました。