javascript - ブラシを個別の範囲に制限する

Question

を使用してユーザーに値の範囲を選択させたいと思いますbrush。ただし、私のアプリケーションでは離散値のみが意味をなすので、ブラシをこれらの離散値 (整数など) に制限したいと思います。

これを行う 1 つの方法は、 Ordinal Brushingで説明されているアプローチを使用することです。この例では、ブラシ自体が連続値を取ることができ、それが序数スケールの離散値にマップされます。

ユーザーがブラシをブラッシングまたはドラッグしているときに、個別の値にスナップするブラシを取得したいと思います。基本的に機能するものを思いつきました:丸め、target.extent丸められた範囲を再選択します( Fiddle ):

function brush() {
    var s = d3.event.target.extent();
    if (d3.event.mode === "move") {
        var extentlength = Math.round(s[1] - s[0])
        d3.event.target.extent([Math.round(s[0] + 0.5) - 0.5,
        Math.round(s[0] + 0.5) - 0.5 + extentlength])
    } else {
        d3.event.target.extent([Math.round(s[0] + 0.5) - 0.5,
        Math.round(s[1] + 0.5) - 0.5])
    }
    d3.event.target(d3.select(this))
}

ただし、これは少しぎこちなく感じられ、ユーザーがブラシをドラッグしているときにカーソルがブラシの端にホバリングし、カーソル記号が「ドラッグ」の手から「サイズ変更」に変わるという望ましくない動作につながります。矢印。

個別の範囲の選択のみを可能にするブラシを取得する、よりエレガントで堅牢な方法はありますか?