2

私の目標は、棒グラフからデータポイントを削除することです。

次に、それ自体を更新し
ます。X軸とY軸を
更新します。実際の棒グラフを
更新します。凡例 を更新します。

私が抱えている問題：
グラフの長方形をexit（）。remove（）すると、コードは凡例の長方形も削除します。凡例に長方形を入力（）しようとすると、長方形が表示されません。ここで何が起こっているのかわかりませんが、データの変更により要素の追加と削除に成功していません。どんな助けでもいただければ幸いです。

問題が発生していると思われる場所のコードスニペット：
これは、凡例の長方形も削除する部分です（これをここで行うか、凡例の入力/更新/削除部分で行うかはわかりません）

以下のコードは、ユーザーが「すべて削除」ボタンをクリックした直後に実行されます。ここでの私の意図は、1つのバー（「ALL」という名前のバー）のみを削除し、チャートを更新することです。 

            //Select rectangles
            var bars = svg.selectAll("rect")
                          .data(dataset, function(d) { return d.State; });


            //Enter rectangles
            bars.enter()
                .append("rect")
                .style("fill", function(d,i) { return color(i) })
                .attr("x", function(d) { return xScale(d.State); })
                .attr("y", function(d) { return yScale(d.CustomerCount) })
                .attr("width", xScale.rangeBand()) //returns rangeRoundBands width
                .attr("height", function(d) { return h - yScale(d.CustomerCount) });                                  


            //Update rectangles
            bars.transition()
                .duration(1000)
                .style("fill", function(d,i) { return color(i) })
                .attr("x", function(d) { return xScale(d.State); })
                .attr("y", function(d) { return yScale(d.CustomerCount) })
                .attr("width", xScale.rangeBand()) //returns rangeRoundBands width
                .attr("height", function(d) { return h - yScale(d.CustomerCount) });


            //Exit rectangles       
            bars.exit()
                .transition()
                .duration(500)
                .attr("x", w)
                .remove();

コード全体は次のとおりです：http：
//plnkr.co/edit/Nue5bocQsI4E6D5wfNSP

少し小さいコード
を次に示します。コードを可能な限り削減しようとしましたが、それでもかなり大きいです。
http://jsfiddle.net/aNQWV/

4

1 に答える 1

2

あなたが言うデータを更新する部分で：

var bars = svg.selectAll("rect")
    .data(dataset, function(d) { return d.State; });

問題は、この時点でsvgに2種類のrectが含まれていることです。1つの種類はバーに対応し、他の種類は凡例の一部です。これは、新しいデータをこの長方形の組み合わせに結合しているのに対し、実際には新しいデータをバーのみで結合したいことを意味します。

したがって、バーの長方形のみを対象とする、より具体的なセレクターが必要です。典型的なアプローチは、それらを作成するときにそれらのrectにクラスを追加することです。

svg.selectAll(".bar")
    .data(input)
  .enter().append("rect")
    .attr("class", "bar");

次に、データを更新する部分で、次のように言います。

var bars = svg.selectAll(".bar")
    .data(dataset, function(d) { return d.State; });
于 2013-01-29T01:14:29.443 に答える