javascript - 鼠标悬停时的垂直线表现异常 (d3.js)

Question

我正在尝试添加一条在鼠标悬停时悬停在图表上方的垂直线，如下例所示:http://bl.ocks.org/WillTurman/4631136

不同的是我的页面涉及小倍数。这是我的(半工作的)Plunker:http://plnkr.co/edit/H5r704WoIOBFXrPm2WFp?p=preview

以下代码:

    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。
• 该线会留下自身的副本，有时可以通过缓慢、小心地将鼠标再次移到它们上来将其删除；有时不是。
• 该行不会出现在光标下方。它看起来在左边很远的地方。我尝试过摆弄不同的值，但我就是无法找到正确的位置。

我对鼠标悬停时垂直线是否悬停在单个图表上方或所有图表上方无关紧要。我也不知道如何实现。我该如何解决？ http://plnkr.co/edit/H5r704WoIOBFXrPm2WFp?p=preview

Answer 1

这是带有工作垂直线的代码分支:
Plunker

相关代码:

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")});

1. 删除了HTML 元素div，并将其替换为路径。 根据我的知识/经验，当浏览器调整大小或容器(svg 的父级)尺寸发生变化时，CSS 位置会变得困惑。事实是:我发现这是一种更简单的方法，相信我，如果您有剪辑路径，它会非常有效。
2. 您的代码中缺少的一件重要事情是，带有通用类“remove”的垂直线被附加到每个 svg 上，并且它们之间没有区别。这就是我要说的内容:

d3.select(svgHook).select('svg.state.'+selectedState)

在您的情况下，mousemove 事件导致显示所有垂直线，因为它被添加到 svgHook 中，在您的情况下只有两条:#main-chart-hook 和 #small-multiples-hook。我引用每个 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")

希望这对您有所帮助，如果代码的任何部分无法理解，请告诉我:)