画笔选择手柄半径是否可配置？

Question

我在平板电脑上测试过以下示例＆amp;手机： 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可以从这里显示的技术中受益。

无论如何，让宽度增加一倍。我们的pretransition处理程序将宽度设置为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);
  });

瞧！有大量区域的大把手可以抓住：