Javascript 鼠标上的垂直线意外出现（d3.js）

我试图在鼠标上方添加一条悬停在图表上方的垂直线，如本例所示：

不同的是我的页面包含小倍数。这是我的半工作式打捞器：

以下代码：

    var vertical = d3.select(svgHook)
      .append("div")
      .attr("class", "remove")
      .style("position", "absolute")
      .style("z-index", "19")
      .style("width", "1px")
      .style("height", h)
      .style("top", "10px")
      .style("bottom", "30px")
      .style("left", "30px")
      .style("background", "#fff");

d3.select(svgHook)
    .on("mousemove", function(){  
       mousex = d3.mouse(this);
       mousex = mousex[0] + 5;
       vertical.style("left", mousex + "px" )})
    .on("mouseover", function(){  
       mousex = d3.mouse(this);
       mousex = mousex[0] + 5;
       vertical.style("left", mousex + "px")});

产生以下问题：

垂直线滚动页面上的所有内容，包括标题和轴，而不仅仅是每个图表或任何单个图表的path.area。 该行会留下自身的副本，有时可以通过再次缓慢、小心地将其删除；有时候不是。 该行不会显示在光标下方。它看起来离左边很远。我尝试过摆弄不同的价值观，但我就是无法正确定位。

---

我不在乎鼠标悬停在一张图表上方，还是所有图表上方。我也不知道如何实现这两个目标。我该如何解决这个问题

下面是您的代码分支，其中包含工作垂直线：

相关代码：

var vertical = d3.select(svgHook).select('svg.state.'+selectedState)
  .append("path")
  .attr("class", "remove").style({stroke:'#000', 'stroke-width': '1px', 'pointer-events': 'none'});

d3.select(svgHook).select('svg.state.'+selectedState).on("mousemove", function(){  
   mousex = d3.mouse(this);
   vertical.style("display", null).attr("d", function () {
   var d = "M" + mousex[0] + "," + (size.h-padding.bottom);
   d += " " + mousex[0] + "," + padding.top;
   return d;
  })
}).on("mouseout", function(){  
   mousex = d3.mouse(this);
   mousex = mousex[0] + 5;
   vertical.style("display", "none")});

去掉HTML元素div并用路径替换它。 根据我的知识/经验，当浏览器调整大小或容器svg的父级维度发生变化时，CSS位置会出现混乱。事实是：我发现这是一个更简单的方法，相信我，如果你有剪辑路径，它会非常有效。 代码中缺少的一个重要方面是，带有一般类删除的垂直线被附加到每个svg，它们之间没有区别。下面是我要说的： d3.选择SVGHook.选择“svg.state.”+选择状态

在您的例子中，mousemove事件导致显示所有垂直线，因为它被添加到svgHook，而在您的例子中，svgHook只有两个：主图表挂钩和小倍数挂钩。我将参照每个svg的垂直线分别为其添加鼠标悬停事件

请不要介意，我修改了很多代码，添加了一些路径的容器。看一下代码，让我知道这是否适合你。这就是我在SVG编码方面的做法。 相关代码：

var main = state.append('g').classed('main', true);

var overlay_rect = main.append('rect')
  .attr('class', 'overlay')
  .attr('width', size.w-padding.left)
  .attr('height', (size.h-padding.bottom-padding.top))
  .attr('transform', 'translate('+padding.left+', ' + padding.top+')')
  .style({'fill': 'none', 'stroke': 'none', 'pointer-events': 'all'})

var pathGroup = main.append('g').classed('paths', true);

var paths = pathGroup.selectAll("path")

---

希望这有帮助，如果代码的任何部分不可理解，请告诉我：

您介意我为垂直线添加路径而不是div吗？因为‘我相信在所有情况下，相同svg的path元素都比HTML元素更能正确定位。当然，如果您能够演示如何做到这一点，我将非常感激。是的，我很快会添加一个Plunkr！：这是完美的；非常感谢。这也是一个比我偶然发现的解决方案好得多的解决方案，它只在你将鼠标移到路径本身而不是背景上时才显示垂直线。关于如何不这样做的参考：很高兴我能帮忙！：事实上，我刚刚发现了一个问题：垂直线没有出现在任何以哥伦比亚特区、北卡罗来纳州等命名的州。。知道为什么吗？哦，是的，我的错！这是因为：d3.selectsvgHook.select'svg.state.+selectedState名称（带空格）呈现为svg的多个类，结果没有找到任何元素。你能看看所有的州和辖区是如何完成第98行的吗？我正在处理名称，这样每个svg只有一个类。我已经用同样的逻辑更新了我的Plunker。刚刚更新了第113行。请看一看。