d3.brush嵌入后在Firefox或Edge中不起作用

Question

我正在使用Swiper API。当嵌入任何d3图表时，笔刷会收到毫无意义的鼠标坐标，无论如何都不会与单击发生的容器有关。 （实际上至少是包围的svg。）我正在尝试寻找解决方案，但我不知道如何强制d3.brushX使用真正相对的鼠标坐标。我不知道这是否是错误，它可能与笔刷本身无关，而是浏览器如何通过鼠标自上而下单击DIV，直到到达SVG。这是Fiddle。

（仅适用于讨厌的代码规则：）

    // Add brushing
var brush = d3.brushX()                   

第二张幻灯片包含一个嵌入式d3折线图示例，摘自here.提琴只能在Chrome 75+中使用。不适用于Firefox 68+和Edge 44 +。

独立运行图表示例，它可在所有可用的浏览器中使用。因此，我希望为Swiper和D3指定此职位，以寻求解决方案的提示。

Answer 1

根据我发现的问题here，我可以更改point.js例程中的行为，这是一种解决方法。如果D3图表使用画笔**和**图表元素的SVG由具有明确宽度的周围DIV嵌入，则在Firefox或Edge中将无法正确解释鼠标单击。在Chrome浏览器中，它可以完美运行。我更改了这样的代码，以使其可以在FF和Edge中使用，但是却失去了Chrome的功能：

function reverseTraversal(node,targetTagName) {
    var p = node;
    while(p.tagName != targetTagName) p = p.parentNode;
    return p;
}

function point(node, event) {
  var svg = node.ownerSVGElement || node;

  if (svg.createSVGPoint) {
    var point = svg.createSVGPoint();
    var p = reverseTraversal(node,"DIV");
    var rect = p.getBoundingClientRect();
    point.x = event.clientX + rect.width, point.y = event.clientY;
    point = point.matrixTransform(node.getScreenCTM().inverse());
    return [point.x, point.y];
  }

  var rect = node.getBoundingClientRect();
  return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
}

如您所见，我必须向后移动，直到到达最接近的DIV，然后获得边界和add其宽度到clientX坐标。如果不增加固定宽度，则在特定情况下无法使用画笔。

要使用所有浏览器，可能需要进行切换。这不是一个完美的解决方案，只是d3.brushX行为的一种解决方法。