鼠标悬停时的垂直线表现异常（d3.js）

Question

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

区别在于我的页面涉及小倍数。这是我的（半工作）Plunker：http://plnkr.co/edit/H5r704WoIOBFXrPm2WFp?p=preview

以下代码：

    A       B  C1      C2   C3                  
    a1      b1  0      0     1        
    a2      b2  0      0     1
    a3      b3  0      0     1

产生以下问题：

• 垂直线滚动页面上的所有内容，包括标题和轴，而不仅仅是每个图表的 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. 您的代码中缺少的一个重要事项是带有常规类的垂直线＆＃34;删除＆＃34;每个svg都附有它们，它们之间没有区别。这就是我所说的：

  

d3.select（svgHook）。选择（＆＃39; svg.state＆＃39;。+ selectedState）

在你的情况下，mousemove事件导致显示所有垂直线，因为它被添加到svgHook中，在你的情况下只有两个：#main-chart-hook和＃small-multiples-hook。我为每个 svg 单独添加鼠标悬停事件，并参考它的垂直线。

1. 请不要介意，但我更改了很多代码（添加了s，路径的容器。看看代码，让我知道这对你来说是否合适。这就是我＆＃39;在实践中，当谈到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")

希望这会有所帮助，让我知道代码的任何部分是否可以理解:)