D3.js d3刷牙和鼠标移动共存

我正在尝试更新和添加刷牙（刷牙显示在折线图下），使它看起来像

在第一个链接中添加了编码：

var brush = d3.svg.brush()
  .x(x)
  .on("brush", brushmove)
  .on("brushend", brushend);

svg.append("g")
  .attr("class", "brush")
  .call(brush)
  .selectAll('rect')
    .attr('height', height);

function brushmove() {
  var extent = brush.extent();
}

function brushend() {
 x.domain(brush.extent())
 console.log(brush.extent());
}

问题是，一旦我添加了刷牙，图形后面就形成了一个背景，我不能再执行鼠标事件（mousemove）

有没有办法修复它，让它看起来像谷歌？ 1） 刷牙和鼠标事件共存 2） 曲线下的刷涂面积

var csv=

date，close1，close2
1998年3月26日，第58.13日
12614.48,53.98年3月27日
3月28日12617.62,67.00
2003年3月29日12609.86,89.70
3月30日至12599.55,99.00
2-Apr-12618.63130.28
3-Apr-12629.32166.70
1998年4月4日12624.31234
5-Apr-12633.68345.44
9-Apr-12636.23443.34
10-Apr-12628.44543.70
11-Apr-12626.20580.13
12-Apr-12622.77605.23
13-Apr-12605.23626.20
4月16日至12580.13628.44
4月17日至12543.70636.23
18-Apr-12443.34633.68
4月19日12345.44624.31
20-Apr-12234.98629.32
23-Apr-12166.70618.63
4月24日至12130.28599.55
2012年4月25日，99.00609.86
2012年4月26日，89.70617.62
2012年4月27日，67.00614.48
2012年4月30日，53.98606.98
12年5月1日，58.13503.15

您链接到的示例和

画笔都在绘图顶部添加一个
rect
，以捕获鼠标事件。使它们共存的关键是添加笔刷（并允许它创建其rect），然后使用该rect添加工具提示事件。这样，您只会得到单点事件rect：

// add a g for the brush
var context  = svg.append("g");

// add the brush
context.call(brush);

// grab the brush's rect and add the tooltip events
context.select(".background")
  .on("mouseover", function() {
    focus.style("display", null);
  })
  .on("mouseout", function() {
    focus.style("display", "none");
  })
  .on("mousemove", mousemove);


完整代码：



/*设置CSS*/
身体{
字体：12px Arial；
}
路径{
笔画：钢蓝；
笔画宽度：2；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
.范围{
冲程：#fff；
填充不透明度：.125；
形状渲染：边缘清晰；
}
//设置画布/图形的尺寸
var保证金={
前30名，
右:20,，
底数：30，
左：50
},
宽度=600-边距。左侧-边距。右侧，
高度=270-margin.top-margin.bottom；
//解析日期/时间
var parseDate=d3.time.format（“%d-%b-%y”）.parse，
formatDate=d3.time.format（“%d-%b”），
平分日期=d3.平分线（函数（d）{
返回日期；
}).左；
//设定范围
var x=d3.time.scale（）.range（[0，width]）；
变量y=d3.scale.linear（）.range（[height，0]）；
//定义轴
var xAxis=d3.svg.axis（）.scale（x）
.方向（“底部”）。刻度（5）；
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
//界定界线
var valueline=d3.svg.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.close）；
});
var area=d3.svg.area（）
.x（功能（d）{
返回x（d.日期）；
})
.y0（高度）
.y1（功能（d）{
返回y（d.close）；
});
//添加svg画布
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
var defs=svg.append（“defs”）；
var areaClip=defs.append（“clipPath”）
.attr（“id”、“区域剪辑”）
.append（“rect”）
.attr（“x”，宽度）
.attr（“y”，0）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var lineSvg=svg.append（“g”）；
var focus=svg.append（“g”）
.样式（“显示”、“无”）；
var brush=d3.svg.brush（）
.x（x）
.on（“刷子”，函数（）{
var s=brush.extent（），
x1=x（s[0]），
x2=x（s[1]）；
areaClip.attr（'x'，x1）；
areaClip.attr（'宽度'，x2-x1）；
})
var csv=`date，close
1998年3月26日
12614.48年3月27日
12617.62年3月28日
2003年3月29日至12609.86
3月30日至12599.55
12618.63年4月2日
12629.32年4月3日
12624.31年4月4日
12633.68年4月5日
12636.23年4月9日
12628.44年4月10日
11-Apr-12626.20
12622.77年4月12日
4月13日至12605.23
4月16日至12580.13
4月17日至12543.70
2014年4月18日43.34
4月19日至12345.44
1998年4月20日至12月34日
4月23日至12166.70
4月24日至12130.28
2012年4月25日，99.00
2012年4月26日，89.70
2012年4月27日，67.00
2012年4月30日，53.98
5月1日至12日，58.13`；
var data=d3.csv.parse（csv）；
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 close=+d.close；
});
//缩放数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.close+20；
})]);
//添加valueline路径。
lineSvg.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，valueline（数据））；
lineSvg.append（“路径”）
.attr（“d”，区域（数据））
.样式（“填充”、“钢蓝”）
.style（“笔划”、“无”）
.style（“不透明度”、“0.5”）
.attr（“剪辑路径”、“url（#areaClip）”）
//添加X轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
//附加x行
focus.append（“行”）
.attr（“类”、“x”）
.style（“笔划”、“蓝色”）
.style（“笔划数组”、“3,3”）
.样式（“不透明度”，0.5）
.attr（“y1”，0）
.attr（“y2”，高度）；
//附加y行
focus.append（“行”）
.attr（“类别”、“y”）
.style（“笔划”、“蓝色”）
.style（“笔划数组”、“3,3”）
.样式（“不透明度”，0.5）
.attr（“x1”，宽度）
.attr（“x2”，宽度）；
//在交点处附加圆
焦点。附加（“圆”）
.attr（“类别”、“y”）
.style（“填充”、“无”）
.style（“笔划”、“蓝色”）
.attr（“r”，4）；
//将值放置在交点处
focus.append（“文本”）
.attr（“类别”、“y1”）
.style（“笔划”、“白色”）
.样式（“笔划宽度”、“3.5px”）
.style（“不透明度”，0