Javascript 单击按钮d3.js时如何删除线上的工具提示

我试图在下面的多行图表上添加工具提示。 我希望鼠标悬停在两行上时，工具提示同时显示在这两行上，如。在我的真实案例中，我有四行

这是我的箱子 点击右上角的“RunwithJS”查看图表

我的问题是

在我的jsbins中，工具提示仅显示在直线的第一个点上，其他工具提示在鼠标移动时不显示。有人能帮忙指出原因吗

如何在不重复太多代码的情况下使工具提示同时显示在行上？因为我正在使用

d3.nest（）

转换数组，所以我不确定这是否会影响工具提示的工作

谢谢

更新 按照Mark评论中的链接，我终于完成了工具提示。 但我还有其他一些问题

这是我更新的JSbins

第一个问题是。。在我的图表中，右侧有两个按钮，单击按钮时，线条可能消失或出现。并且该行的相应工具提示应消失或与该行一起出现。但在我的图表中，即使我单击按钮，工具提示仍然存在

我试图删除和更改工具提示的不透明度，但仍然无法使其正常工作。有人知道这件事吗

第二个问题是..我试图让工具提示开始显示在“name1”处，这是行的起点。我知道灰色矩形用于捕捉画布上的鼠标移动，所以我尝试通过

.attr（“transform”、“translate（180,3）”）移动矩形。

但鼠标在y轴上移动时仍会显示工具提示。你能解释一下原因和建议吗

---

非常感谢

首先问题，为每个“每行鼠标”设置一个唯一的id，以便您可以切换其不透明度：

var mousePerLine = mouseG.selectAll('.mouse-per-line')
  .data(dataNest1)
  .enter()
  .append("g")
  .attr("class", "mouse-per-line")
  .attr("id", function(d){
    return "mouse-per-line-" + d.key;
  });   

在图例中，单击处理程序：

d3.select("#mouse-per-line-" + d.key)
  .style("opacity", newOpacity);

第二个问题，设置

x

和

width

属性，而不是

transform

移动rect。您可以通过以下方式使其成为动态的：

mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
  .attr('x', x(dataNest1[0].values[0].x))
  .attr('width', x(dataNest1[0].values[dataNest1[0].values.length - 1].x) - x(dataNest1[0].values[0].x)) 
  ...

---

更新代码：

var数据1=[
{x:“名称1”，y:2.5，标签：“A”}，
{x:“名称2”，y:3.5，标签：“A”}，
{x:“名称3”，y:4.7，标签：“A”}，
{x:“名称1”，y:4.7，标签：“B”}，
{x:“名称2”，y:3.5，标签：“B”}，
{x:“名称3”，y:4.9，标签：“B”}，
];	 
var margin={顶部：20，右侧：150，底部：60，左侧：80}，
宽度=1160-margin.left-margin.right，
高度=500-margin.top-margin.bottom；	
var x=d3.scale.ordinal（）。
范围带（[0，宽度]，0.4,0.8）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var line=d3.svg.line（）
.插入（“基础”）
.x（函数（d）{返回x（d.x）；}）
.y（函数（d）{返回y（d.y）；}）；
var svg=d3.选择（#折线图”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
x、 域（data1.map（函数（d）{returnd.x；}））；
y、 域（[0，d3.max（data1，函数（d）{returnd.y；}）]）；	
append（“g”）。
属性（“类”、“x轴”）。
属性（“变换”、“平移（-70、+height+）”）。
调用（xAxis）；
append（“g”）。
属性（“类”、“y轴”）。
呼叫（yAxis）；
var dataNest1=d3.nest（）
.key（函数（d）{返回d.label；}）
.条目（数据1）；
//console.log（dataNest1）
var color=d3。
规模
序数（）。
范围（[‘红色’、‘蓝色’]）。
域（d3.keys（data1[0]）。
过滤器（函数（键）{return键=='label'；}））；	
var legendSpace=width/dataNest1.length；	
dataNest1.forEach（函数（d，i）{
追加（“路径”）
.attr（“类别”、“第1行”）
.style（“笔划”，函数（）{
返回d.color=color（d.key）；}）
.attr（“id”，“tag”+d.key.replace（/\s+/g'，）//分配id**
.attr（“d”，行（d.values））；
svg.append（“文本”）
.attr（“x”，宽度-边距。左侧+50）
.attr（“y”，legendSpace/4+i*（legendSpace/6））
.attr（“类”、“lineLegend1”）
.attr（“id”，“tagLegend”+d.key.replace（//\s+//g，）//分配id**
.style（“填充”，函数（）{
返回d.color=color（d.key）；}）
.on（“单击”，函数（）{
控制台日志（d）；
//确定当前行是否可见
var active=d.active？错误：正确，
newOpacity=active？0:1；
//根据ID隐藏或显示元素
d3.选择（“#tag”+d.key.replace（/\s+//g，”））
//.remove（）；
.transition（）.持续时间（500）
.style（“不透明度”，newOpacity）；
//d3.全选（“.鼠标每行圆”）
//.style（“不透明度”，newOpacity）；
//d3.选择全部（“.鼠标每行文本”）
//.style（“不透明度”，newOpacity）；
//更新元素是否处于活动状态
d、 主动=主动；
d3.选择（“每行鼠标-”+d键）
.style（“不透明度”，newOpacity）；
})
.文本（d.key）；
});	    	
var mouseG=svg.append（“g”）
.attr（“类”、“鼠标悬停效果”）；
append（“path”）//这是跟随鼠标的黑色垂直线
.attr（“类”、“鼠标线”）
.style（“笔划”、“黑色”）
.style（“笔划宽度”、“1px”）
.样式（“不透明度”、“0”）；
var lines=document.getElementsByClassName（'line1'）；
var mousePerLine=mouseG.selectAll（“.mouse per line”）
.数据（数据嵌套1）
.输入（）
.附加（“g”）
.attr（“类”，“每行鼠标”）
.attr（“id”，函数（d）{
返回“每行鼠标-”+d.k