debug-can't get hover-interaction and brushing to coexist

can't get hover-interaction and brushing to coexist

问题描述：要求实现一个SVG图形的放大，d3官方没怎么看懂，准备借鉴一些现有的实例。Google了一番，当我在尝试实现像这个页面的效果时，的确可以实现刷子选中放大的效果，但是却发现之前的设在元素之上的hover时间不能正常的出现，纠结了好长时间终于在学长的帮助下找到原因。

原始部分代码：

//这里我实现的是选中一块区域然后对这块区域进行放大的效果
var brush = d3.brush().on("end",brushended),
      idleTimeout,
      idleDelay = 350;
  svg.append("g")
      .attr("id","brush")
      .call(brush);
  function brushended(){
    var s = d3.event.selection;
    if(!s){
      if(!idleTimeout){
        return idleTimeout = setTimeout(idled,idleDelay);
      }
      xScale.domain([0,1.1*xAxisWidth]);
      yScale.domain([0,1.1*yAxisWidth]);
    }else{
      xScale.domain([s[0][0],s[1][0]].map(xScale.invert,xScale));
      yScale.domain([s[1][1],s[0][1]].map(yScale.invert,yScale));
      svg.select("#brush").call(brush.move,null);
    }
    zoom();
  }

这里实现的元素检查：

图1

这个时候鼠标移动到我之前添加mouseover时间的元素时，鼠标事件没有响应，然后我就开始了艰辛的debug之路。
当时有找到d3 v3的解决方案，但v3和v4的版本差别还是有点，只从代码上看不出有什么好的解决方案。在学长的指导与启发下，终于找到了两种解决方法。

参考d3 v3的解决方案

检查元素分析可知，我的代码部分和正确的方案之间最大差别就是它把所有的mouseover事件绑定在了pointer-events="all"所在的g中，如下图所示：

图2

所以想到将所有鼠标mouseover事件绑定的元素也写到同样的g中，问题是不是也能得到解决？答案是可以的。

图3

这就是第一种解决方法，更深层次的分析其中的原因：

pointer-events属性

首先了解一下pointer-events属性，毕竟这就是导致bug的源头,主要的属性值如下

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

这里主要的就是用到了all和none这两个，

• 指定为all时: 鼠标事件只能绑定在当前指定pointer-events="all"的元素之上。所以说我的代码中出现mouseover事件不能显示出来的主要原因就是circles的鼠标事件已经被如下代码定义的层所拦截。

all
SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke and visibility properties do not affect event processing.

• 指定为none时：如果被指定元素的子元素没有明确的设定pointer-events属性，该元素的鼠标监听事件永远不会触发，这也就衍生出了之后将要写到的第二种解决方案。

浅析v4版本brush中的rect

参考一下这张图

图4

有很多的标签，下面一个个的分析它们:

1. 首先第一个rect是一个背景，规定了可以选定区域的范围。光标的形状就是可以选择范围的细十字形状。
2. 第二个rect就是当前选定区域的范围，光标的形状是粗一点的十字形状。
   3.其余的八个rect指的是四条边和四个顶点的位置，从命名中也可以看出，north、south、east、west、northwest、northeast、southeast、southwest。

第二种解决方案

之前也写到了只要更改一下pointer-events属性就可以将mouseover事件显示出来。我采用的方法是首先将

中的pointer-events属性设置为none，之后添加SVG图像的点击事件，点击之后将pointer-events属性设置为all，然后在调用刷子结束的时候将pointer-events属性再次设置为none，这样的结果可能就是有一点bug就是每次选中是好像有点迟钝，就是必须点击一下才能选中区域。

var brush = d3.brush().on("end",brushended),
      idleTimeout,
      idleDelay = 350;
  svg.append("g")
      .attr("id","brush")
      .call(brush);
  d3.select(".overlay").attr("pointer-events","none");
  d3.select("svg")
  .on("mousedown",function(){
    d3.select(".overlay").attr("pointer-events","all");
  });
      
  function brushended(){
    var s = d3.event.selection;
    if(!s){
      if(!idleTimeout){
        return idleTimeout = setTimeout(idled,idleDelay);
      }
      xScale.domain([0,1.1*xAxisWidth]);
      yScale.domain([0,1.1*yAxisWidth]);
    }else{
      xScale.domain([s[0][0],s[1][0]].map(xScale.invert,xScale));
      yScale.domain([s[1][1],s[0][1]].map(yScale.invert,yScale));
      svg.select("#brush").call(brush.move,null);
    }
    d3.select(".overlay").attr("pointer-events","none");
    zoom();
  }
  function idled(){
    idleTimeout = null;
  }

现在想起，这么个简单的bug也写了这么多，其实主要还是不会运用，需要更进一步的学习。

反思：不能总是依赖于现有的代码去实现，可以借用他们的代码，但关键的是发现问题不能只是从表面上去找原因，当一段代码自己很难理解的时候，不妨深层次的分析它的结构，还是不能的话，尽早请教，不要浪费时间。