1

このコードでは、http://enjalot.com/inlet/4124664/

その主要部分は次のとおりです。

    function render(data) {

        var nodz = svg.selectAll(".node")
            .data(data);

        nodz.enter().append("g")
            .attr("class", "node")
            .attr("id", function(d) { return "id"+d[0]+d[1]; })
            .attr("x",0)
            .attr("y", 0)
            .attr("transform", function(d) {
                return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
            })
            .append("text")
            .attr("x", 0)
            .attr("y", 0)
            .attr("stroke", "black")
            .text(function(d) {return d[2]; });


        // update
        nodz.selectAll("text")
            .text(function(d) {
                return d[2]; });

        // another go
        d3.selectAll("text")
            .text(function(d) {
                return d[2]; });


     }


    // data in form [x pos, y pos, value to display]

    var nodes = [[0,0,0],[1,1,0],[1, -1,0],[2,0,0], [2,2,0]];
    render(nodes);

    nodes2 = [[0,0,1],[1,1,1],[1, -1,1],[2,0,1], [2,2,1], [2, -2,1]];
    render(nodes2);

一部のノードを 2 回描画するコードを呼び出します。

最初のパスで値がゼロの 5 つのノードを描画することを期待していますが、

次に、リストに別の項目を追加し、すべての値を 1 に更新します。すべての値が 1 に変わり、新しいノードが表示されることを期待します。代わりに、最後の ID が 1 に設定されているだけです。一意の ID を追加してノードをデータにバインドしようとしましたが、うまくいきません。また、データがバインドされているかどうかを確認するために再選択を試みました。私が経験したすべてのチュートリアルでは、selectAll().data() 部分を呼び出すだけでデータが更新されますが、何が欠けていますか?

4

1 に答える 1

1

2 番目のオプションの引数 to.data()は、d3 に要素の照合方法を指示する関数です。ここで ID を比較する必要があります。ドキュメントを参照してください。とはいえ、デフォルトではインデックスで一致するため、ID がなくても機能するはずです。

テキストを更新する際の問題は、呼び出した後、その選択に一致させたいものを d3 に知らせるために再度.selectAll()呼び出す必要があることです (つまり、新しいデータを古いデータにバインドする必要があります)。.data()

于 2012-11-21T16:12:48.303 に答える