Question

我正在使用D3js v4。我想要实现的是将画笔和画笔结合起来。缩放行为根据this示例使用“点击到重新定位”画笔，其中单击画笔后重新定位并且画笔边界以平滑过渡进行舍入。到目前为止，这是我的fiddle。

我的问题是brushended的功能永远不会被执行。看起来缩放会阻止画笔接收鼠标事件。只有当通过注释掉所有缩放功能完全禁用缩放时，我才能完成工作。我在mousedown上尝试了event.stopPropagation和event.stopImmediatePropagation，就像在下面的代码片段中一样，以防止缩放接收mousedown和mouseup事件，但它不起作用。

context.append("g")
  .attr("class", "brush")
  .call(brush)
  .call(brush.move, [x2(new Date(2013, 0, 1)), x2(new Date(2013, 6, 1))])
  .selectAll(".overlay")
  .each(function(d) {
    d.type = "selection";
  })
  .on("mousedown touchstart", function() { d3.event.stopPropagation(); })
  .on("mousedown touchstart", brushcentered)

我是否将stopPropagation放在错误的地方或者我完全错过了什么？任何有关这方面的帮助将不胜感激。

Answer 1

哇！你在这里进行了很多事件处理。让我们分解一下，首先是这个电话：

df = pandas.read_excel('file_name_here.xlsx', sheet_name='Sheet1')

在svg.select(".zoom").call(zoom.transform, d3.zoomIdentity .scale(width / (s[1] - s[0])) .translate(-s[0], 0));事件处理程序中，您正在吃brushed。我的第一个想法是使用简单的brushend hack来允许setTimeout处理。虽然这很有效，但它只会引发一个新问题，brushend中的brush.move会被提升为缩放事件，而不会在brushedend中处理。所以，相反，我只需用缩放替换移动，让zoom事件处理画笔定位，如：

brushed

我认为这会产生您正在寻找的行为。

在下面运行代码和plunker here：

＆＃13;

function brushended() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
  if (!d3.event.selection) return; // Ignore empty selections.

  var d0 = d3.event.selection.map(x2.invert), //=Datum, linker+rechter Brush-Rand
    d1 = d0.map(d3.timeMonth.round);

  // If empty when rounded, use floor & ceil instead.
  if (d1[0] >= d1[1]) {
    d1[0] = d3.timeMonth.floor(d0[0]);
    d1[1] = d3.timeMonth.offset(d1[0]);
  };

  var s = d1.map(x2);
  setTimeout(function(){
    svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));
  });
}

＆＃13;

D3js v4刷＆amp;变焦＆amp;重新点击画笔点击

1 个答案: