D3.js D3缩放和鼠标悬停工具提示

我在尝试让鼠标悬停在我的D3图形上时遇到了问题（我不是D3专家）。我设法使线和点通过缩放进行放大，但无法在点上显示toolptip，不确定是否遗漏了什么，正如您在下图中看到的，一切正常

您可以使用下面的按钮查看我的代码。谢谢你的帮助

var data=JSON.parse（{“success”：true，“response”：[{“product_date”：“2019-09-01”，“value”：{“temperature”：“30.6029968261719”}，{“product_date”：“2019-09-02”，“value”：{“temperature”：“30.1170043945312”}，{“product_date”：“temperature”：“2019-09-03”，“value”：{“temperature”：“temperature”：“30.0830078125”{“temperature”：“temperature”：“2019-09-09-04”，“value”：“temperature”30.24798438”}{“产品日期”：“2019-09-05”，“价值”：{“温度”：“30.9110107421875”}，{“产品日期”：“2019-09-06”，“价值”：{“温度”：“31.3150024414062”}，{“产品日期”：“2019-09-07”，“价值”：{“温度”：“31.2909851074219”}，{“产品日期”：“2019-09-08”，“价值”：{“温度”：“30.7149963378906”}，{“产品日期”：“2019-09”{“温度”：30.010009765625“}，{“产品日期”：“2019-09-10”，“价值”：{“温度”：“29.7990112304688”}，{“产品日期”：“2019-09-11”，“价值”：{“温度”：“29.6549987792969”}，{“产品日期”：“2019-09-12”，“价值”：{“温度”：“30.0769958496094”}，{“产品日期”：“2019-09-13”，“价值”：“温度”：“30.0830078125”{温度：““29.8619995117188”}，{“产品”日期：““2019-09-15”，“值：{“温度：”“30.0029907226562”}，{“产品”日期：““2019-09-16”，“值：{“温度：”：“30.1080017089844”}，{“产品”日期：““2019-09-17”，“值：{“温度：”：“30.6979980469”}，{“产品”日期：““2019-09-18”，“值：{“温度：”：“30.393613”}，{值：{“温度”：“30.5180053710938”}，{“产品日期”：“2019-09-20”，“值：{“温度”：“30.3720092773”}，{“产品日期”：“2019-09-21”，“值：{“温度”：“29.871002173”}，{“产品日期”：“2019-09-22”，“值：{“温度”：“29.7460021972656”}，{“产品日期”：“2019-09-23”，“值：{“温度”：“29.57699”{“产品日期”：2019-09-24，“值”：{“温度”：“29.1159973145”}，{“产品日期”：“2019-09-25”，“值”：{“温度”：“28.908996582”}}）；
var svg=d3。选择（“svg”），
边距={顶部：20，右侧：20，底部：110，左侧：40}，
margin2={顶部：430，右侧：20，底部：30，左侧：40}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
height2=+svg.attr（“height”）-margin2.top-margin2.bottom；
var parseDate=d3.timeParse（“%b%Y”）；
var x=d3.scaleTime（）.range（[0，宽度]），
x2=d3.scaleTime（）.range（[0，宽度]），
y=d3.scaleLinear（）.range（[height，0]），
y2=d3.scaleLinear（）.range（[height2，0]）；
var xAxis=d3.axisBottom（x），
xAxis2=d3.轴底（x2），
yAxis=d3。轴左（y）；
var brush=d3.brushX（）
.范围（[[0,0]，[width，height2]]）
.在（“刷端”，刷过的）；
var zoom=d3.zoom（）
.scaleExtent（[1，无穷大]）
.translateExtent（[[0,0]，[width，height]]
.范围（[[0,0]，[width，height]]）
。打开（“缩放”，缩放）；
var line1=d3.line（）
.curve（d3.curveMonotoneX）
.x（函数（d）{返回x（d.date）}）
.y（函数（d）{返回y（d.value）}）；
var line2=d3.line（）
.curve（d3.curveMonotoneX）
.x（函数（d）{返回x2（d.date）}）
.y（函数（d）{返回y2（d.value）}）；
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var focus=svg.append（“g”）
.attr（“类”、“焦点”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var points=svg.append（'g'）
.attr（“剪辑路径”、“url（#剪辑）”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
var context=svg.append（“g”）
.attr（“类”、“上下文”）
.attr（“transform”、“translate”（+margin2.left+）、“+margin2.top+”）；
var div=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
设vdata=data.response；
//格式化数据
vdata.forEach（（d）=>{
d、 日期=d3.timeParse（“%Y-%m-%d”）（d.product\u日期）；
d、 值=+d.值.温度；
});
x、 域（d3.extent（vdata，函数（d）{返回d.date；}））；
y、 域（[0，d3.max（vdata，函数（d）{返回d.value；}）]；
x2.域（x.域（））；
y2.域（y.域（））；
focus.append（“路径”）
.数据（vdata）
.attr（“剪辑路径”、“url（#剪辑）”）
.attr（“类”、“行”）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”，1.5）
.attr（“d”，第1行）；
focus.append（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
focus.append（“g”）
.attr（“类”、“轴--y”）
.呼叫（yAxis）；
点。选择全部（“.dot”）
.数据（vdata）
.enter（）.append（“圆”）
.attr（“类”、“点”）
.attr（“cx”，函数（d，i）{返回x（d.date）}）
.attr（“cy”，函数（d）{返回y（d.value）}）
.attr（“r”，3）
.attr（“指针事件”、“全部”）
.on（“鼠标悬停”，功能（d）{
过渡部（）
.持续时间（200）
.样式（“不透明度”，.9）；
html（解析日期（d.date）+“
”+f（d.value））
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
})
.开启（“鼠标出”，功能（d）{
过渡部（）
杜尔先生
  svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);

  focus.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .lower();
      .call(zoom);

  focus.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .lower();

      focus.call(zoom);

      var axes = svg.append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

      var points = focus.append('g')  // no need to add a transform, focus already has one.
          .attr("clip-path", "url(#clip)")