D3.js 工具提示鼠标跟踪仅在图形化数据之外有效

我正在尝试将工具提示技术从应用到面积图中

工具提示仅在光标位于图形绘制的区域上方时跟踪鼠标，与示例中不同，在示例中，只要鼠标在svg窗口中，工具提示就会跟踪鼠标

我一直没能弄明白我做错了什么。非常感谢您的帮助

var-tdata=[
{
“日期”：“2016-06-28 05:47:10”，
“价值”：80
},
{
“日期”：“2016-06-28 05:47:20”，
“价值”：90
},
{
“日期”：“2016-06-28 05:47:30”，
“价值”：82
},
{
“日期”：“2016-06-28 05:47:40”，
“价值”：78
},
{
“日期”：“2016-06-28 05:47:15”，
“价值”：85
} ,
{
“日期”：“2016-06-28 05:47:25”，
“价值”：70
} ,
{
“日期”：“2016-06-28 05:47:35”，
“价值”：95
},
{
“日期”：“2016-06-28 05:47:45”，
“价值”：88
} , 
];
//d3代码
var w=800；
var h=300；
var firstappend=false；
var margin={顶部：20，右侧：20，底部：90，左侧：40}，
宽度=w-边距。左侧-边距。右侧，
高度=h-边距.顶部-边距.底部；
var svg=d3.选择（#disp”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var x=d3.time.scale（）.range（[0，width]）；
变量y=d3.scale.linear（）
.domain（[01100]）
.范围（[高度，0]）；
var line=d3.svg.line（）
.插入（“基数”）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d值）；
});
var area=d3.svg.area（）
.插入（“基数”）
.x（line.x（））
.y1（第.y（）行）
.y0（y（0））；
var xAxis=d3.svg.axis（）
.scale（x）//xbar
.orient（“底部”）
.滴答声（d3.time.minutes，4）
.tickFormat（d3.time.format（“%m/%d%m”）；
var yAxis=d3.svg.axis（）
.比例（y）
.orient（'左'）
.1（8）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（+“+0+”、“+height+”））
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”、“-8px”）
.attr（“dy”，“4px”）
.attr（“变换”、“旋转（-90）”）；
append（'g'）
.attr（'class'，'y轴'）.attr（'transform'，'translate（-“+0+”，“+0+”））
.呼叫（yAxis）；
var parseDate=d3.time.format（“%Y-%m-%d%H:%m:%S”）.parse；
var lines=svg.selectAll（'.property'）；
var-lE；
/////////////////////////工具提示代码：
var focus=svg.append（“g”）
.样式（“显示”、“无”）；
var bisectDate=d3.bisector（函数（d）{return d.date；}）；
焦点。附加（“圆”）
.attr（“类别”、“y”）
.样式（“填充”、“红色”）
.style（“笔划”、“黑色”）
//.style（'opacity'，'0.5'）
.attr（“r”，5）；
var wind=svg.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.style（“填充”、“无”）
.style（“指针事件”、“全部”）
.on（“mouseover”，function（）{focus.style（“display”，null）；}）；
//.on（“mouseout”，function（）{focus.style（“display”，“none”）；}）；
/////////////////////////////////
函数更新（数据集）{
//解析新的日期字符串
dataset.forEach（函数（d）{
if（typeof（d.date）==“string”）{d.date=parseDate（d.date）；}
});
//按日期排序
dataset=dataset.sort（sortByDateAscending）；
//更新域
x、 域（d3.extent（数据集，函数（d）{returnd.date；}））；
svg.selectAll（“g.y.axis”）
.呼叫（yAxis）；
svg.selectAll（“g.x.axis”）
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”、“-8px”）
.attr（“dy”，“4px”）
.attr（“变换”、“旋转（-90）”）；
//先追加一次
如果（！firstappend）{
init（数据集）；
firstappend=true；
}
//更新新数据
选择（“.tarea”）.attr（“d”，函数（d）{返回区域（数据集）；}）；
/////////////////////////工具提示代码：
wind.on（“mousemove”，mousemove）；
函数mousemove（）{
var-tset=数据集；
var x0=x.invert（d3.mouse（this）[0]），
i=二等分日期（tset，x0，1），
d0=tset[i-1]，
d1=tset[i]，
d=x0-d0.date>d1.date-x0？d1:d0；
对焦。选择（“圆y”）
.attr（“转换”，
“翻译（“+x（d.date）+”，”+
y（d.值）+“）；
}     
//////////////////////////////////
}
函数init（数据集）{
lines=svg.selectAll（“.property”）
.数据（数据集、函数（d）{
归还d.财产；
});
lE=行。输入（）
.append（'g'）
.attr（“类”、“属性”）；
lE.append（“路径”）
.attr（“类”、“tarea”）
.style（'填充'，'红色'）
.style（'opacity'，'0.5'）
.attr（“d”，函数（d）{
返回区（数据集）；
});
}
函数sortByDateAscending（a，b）{
返回日期.parse（a.Date）-Date.parse（b.Date）；
};
更新（tdata）
。轴路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
我认为图表区域挡住了我们正在监视鼠标移动的元素

允许指针事件通过。tarea可以解决这个问题

CSS:

工作小提琴：
我认为图表的区域挡住了我们正在监视鼠标移动的元素

允许指针事件通过。tarea可以解决这个问题

CSS:

工作小提琴：
谢谢！，我没有意识到它可以出现在css中。谢谢！，我没有意识到它可以在css中。
.tarea{
  pointer-events: none;
}