Question

我正在构建一个与此https://jsfiddle.net/xn1sLbf4/9/非常相似的多系列折线图。

现在，我想更改显示事件的工具提示。我想只有当垂直线在x轴上移动时才显示工具提示，而不是在整条线上显示工具提示。例如，在我的jsfiddle中，当垂直线位于'Mon 03'时，工具提示显示。如果垂直线在“Mon 03”和“Tue 04”之间移动，则工具提示会隐藏。谁能提出想法如何实现这一目标？非常感谢!!

更新

这是我所做的改变。请参阅更新的小提琴：https://jsfiddle.net/xn1sLbf4/10/

我将第192-196行更改为

var mouseRect = mouseG.selectAll('.work-rect')
  .data(newCities[0].values)
  .enter()
  .append("g")
  .attr("class", "work-rect");  

mouseRect.append('svg:rect')
   .attr('x', function(d) { return x(d.date);})
   .attr('width', 5)
   .attr('y', function(d) { return 0;})
   .attr('height',height)   
  .attr('fill', 'none')

仅当垂直线位于刻度线上时，工具提示才会显示。但是垂直线也隐藏了......如何在鼠标穿过图表后始终显示垂直线？

Answer 1

如果.style（＃34;不透明度＆＃34;，＆＃34; 1＆＃34;）在mouseRect.append（＆＃39; svg：rect＆＃39;）中打开（＆＃39; mouseout＆＃ 39;，function（）{从0变为1，可以看到鼠标移动：

Answer 2

我理解你的问题。您只需从CSS文件中删除以下代码即可。

.x.axis path { display: none; }

或者 x.axis path { display: inline; }

多行工具提示显示和隐藏d3.js

2 个答案: