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

Question

我一直在平板电脑和手机上测试以下示例： http://dc-js.github.io/dc.js/examples/filtering.html

除了我在条形图上进行画笔选择然后尝试通过拖动其中一个手柄来修改范围之外，一切都很好。你必须准确地抓住手柄。如果您错过了，您要么拖动范围，要么取消当前范围并开始一个新范围。

那么有没有办法扩大画笔选择手柄周围的选择半径？

Answer 1

好像有an option for this in d3v4, so this will get easier 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);
  });

现在，为了好玩和加分，我们还可以把手柄做得更大。这里是 .

类似地，我们可以覆盖 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);
  });

瞧！大手柄，抓握面积大：

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

Is the brush selection handle radius configurable?

dc.js