D3ブラシのカスタムでnull選択の可視性が処理される

Question

カスタムブラシハンドルで単一の値に等しい範囲のデータをハイライト表示する方法を理解しようとしています。

ここでPlunkrはMike Bostockの例の1つで再作成しました。 Angular 2/ionicですので、問題がある場合は、ここに移動してサンプルのプレーンなJavaScriptをご覧ください。私が編集した主なものは、ヌル選択があるときにcssでカスタムハンドルを隠す場所をコメントすることでした。

http://plnkr.co/edit/tRyhlJ

https://bl.ocks.org/mbostock/4349545

if (s == null) { 
    //handle.attr("display", "none"); 
    //circle.classed("active", false); 
} 

あなたはplunkr例を見ると、あなたはあなたが行くをクリックして許可すればブラシがクリックした行で、まだ完全な球体であることがわかります。代わりに消える場合は、ブラシハンドルを残しておき、ハンドルをクリックしてクリックするとエラーが発生しないようにします。

私は現在取得していますし、回避策を見つけることができないようにエラー、これは次のようになります。

私は優雅に、この内部D3エラーを無視して、自分の選択をさせる上で継続するにはどうすればよいです展開する？

私は、この状態のときにポインタイベントをオフにし、手動でデフォルトハンドルを表示/サイズ変更するなど、何の試みも無用に試しました。毎回、ハンドルをクリックするとこのエラーが発生します。

Answer 1

私が言う限り、それを処理するための「クリーンな」方法はありません。その理由は、1回のクリックでサイズが0の範囲が定義されるため、ブラシは空の範囲とみなし（source参照）、意図的に選択を無効にします（source参照）。

これは、あなたが望むことを行うために独自のバージョンのd3ブラシを作成しない限り、空でない選択を空にする方法も、空の選択に対してブラシをレンダリングする方法もないことを意味します。

私は考えることができる1つの回避策があります：あなたは、空の選択（s == null）何かに選択を設定するbrush.moveを使用を検出したとき。その何かは、サイズが0でない範囲でなければなりません。なぜなら、0にしてからd3にすると、空の選択を考慮して無効にするからです。ゼロサイズの選択（ゼロクリックのイベントによって定義されているため）である必要があります。ゼロサイズの選択を行うには、小さな選択、たとえば[123, 123.0001]にする必要があります。 123の代わりに、d3.mouseを使用して取得できるクリックのマウス位置を知る必要があります。

if (s == null) { 
    var mousex = d3.mouse(this)[0] 
    gBrush.call(brush.move, [mousex, mousex+.001]); 
}