Question

查看following d3 snippet，如果您尝试向上或向下拖动任何圆圈，因此，调整堆积的条形元素的大小，您会注意到光标比调整大小的边缘更快或更慢实际上是条形图最左边比最右边的酒吧慢......为什么？以及如何修复？

拖动行为是从第110行

定义的

var drag2 = d3.behavior.drag()
.on("drag", function(d) {
  var datum = data[d.group];
  var dy = d3.event.dy * 0.3; // <<<<<<<<<<<<<<<<< here is scaled down
  if(d.i == 0) {              // but no matter what weight I put here   
    datum.bars[0].y1 -= dy;   // it will always be too fast or too slow .. 
    datum.bars[1].y0 -= dy;
  } else {
     datum.bars[1].y1 -= dy;
    datum.bars[2].y0 -= dy;
  }
  d.y -= dy;

  render(rects)
})

基本上影响线为113 var dy = d3.event.dy * 0.3;，此处event.dy按比例缩小0.3，但为什么呢？我玩过那个重量，但似乎没有任何值可以保持边缘被拖动并且光标相等。

UDPATE 此另一个示例How can I click to add or drag in D3?显示正确的计算方法是使用transform/translate，但这些是元素的属性，在我的OP中，受影响的目标是数据本身而非视觉元素。

Answer 1

您必须使用反比例来计算dy，如下所示：

var drag2 = d3.behavior.drag()
  .on("drag", function(d) {
    var datum = data[d.group];

    y.domain([d.total, 0]);
    var dy = y.invert(d3.event.dy);

    // ...
});

由于这只是一个线性比例，你也可以这样做：

var dy = d3.event.dy * d.total / height;

d3：如何在拖放中正确计算delta-y？

1 个答案: