ブラシ選択ハンドルの半径は設定可能ですか？

Question

私はタブレット上で、次の例をテストしてきた&電話： http://dc-js.github.io/dc.js/examples/filtering.html

すべては、その後、いずれかのハンドルをドラッグして範囲を変更しようと、私はバーチャート上のブラシ選択を行う際から離れて素晴らしいです。あなたはハンドルをつかまえるために正確でなければなりません。それを見逃した場合、範囲をドラッグするか、現在の範囲をキャンセルして新しい範囲を開始します。

ブラシ選択ハンドルの周りで選択半径を広げる方法はありますか？

Answer 1

an option for this in d3v4のように見えるので、これは簡単になりますwhen dc.js is upgraded。

ここでは、d3v3が何をしているのかを推測し、pretransition event handlerを使用して、レンダリングされる前にブラシを修正します。視覚的表現を置き換えることもできます。 d3v3で

、ブラシ幅がハード-3のオフセットXと6で符号化されているように見える：

これは右ブラシハンドルと完全に整列するように思われる理由私は説明できません左のブラシハンドルでは数ピクセル離れているようです。これを試してみると、オフセットは、左ハンドル（西）と右ハンドル（東）のオフセットが-6になるように思われるので、ここに示すテクニックの恩恵を受ける可能性があります。

とにかく、幅を2倍にしましょう。私たちの前駆転移ハンドラが12に幅を設定し、西のための-12と東ハンドルのためのオフセットを0に設定します：

今

spendHistChart.on('pretransition.bighandle', function(chart) { 
     chart.selectAll('g.brush .resize.w rect') 
      .attr('x', -12) 
      .attr('width', 12); 
     chart.selectAll('g.brush .resize.e rect') 
      .attr('x', 0) 
      .attr('width', 12); 
    }); 

、楽しさとボーナスポイントのために、我々はまた、ハンドルを大きくすることができます。ここにはa previous answer where we modified the brush pathがあります。

同様に、我々はresizeHandlePathを上書きすることができますし、基本的には二重のすべてのX座標だけでなく、ハンドルの上部と下部を構成する円弧の高さは倍増：

dc.override(spendHistChart, 'resizeHandlePath', function (d) { 
     var e = +(d === 'e'), x = e ? 1 : -1, y = spendHistChart.effectiveHeight()/3; 
     return 'M' + (0.5 * x) + ',' + y + 
      'A12,12 0 0 ' + e + ' ' + (13 * x) + ',' + (y + 12) + 
      'V' + (2 * y - 12) + 
      'A12,12 0 0 ' + e + ' ' + (1 * x) + ',' + (2 * y) + 
      'Z' + 
      'M' + (5 * x) + ',' + (y + 14) + 
      'V' + (2 * y - 14) + 
      'M' + (9 * x) + ',' + (y + 14) + 
      'V' + (2 * y - 14); 
    }); 

出来上がりを！たくさんの領域をつかむ大きなハンドル：