畫筆選擇手柄半徑是否可配置？

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，刷寬度似乎是硬6與x的偏移-3編碼：

我無法解釋爲什麼這似乎與右刷柄完全一致但是對於左刷柄來說似乎只有幾個像素。在實驗中，似乎偏移量應該爲左（西）句柄爲-6，右爲（東）句柄爲0，所以dc.js可能會受益於此處顯示的技術。

無論如何，讓我們加倍寬度。我們轉變前處理程序將寬度設置爲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); 
    }); 

，瞧！大把手可以抓住很多區域：