Javascript 尝试使用笔刷/缩放在d3图表中使用散点图

我目前正试图学习d3，想做一个小项目，但遇到了一个问题。我一直使用此块作为基础：

用我的散点图数据替换区域填充。我能够获得要渲染的点，但是当在第二个轴上移动缩放/画笔时，.focus图表的x轴会变换，但我的散点图没有。我尝试了很多方法，包括查看是否将其附加到正确的svg元素，但由于我对D3的理解有限，我不太确定到底出了什么问题。我的示例代码如下：

.区域{
填充：#FDB827；
剪辑路径：url（#剪辑）；
}
.zoom{
光标：移动；
填充：无；
指针事件：全部；
}
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 area=d3.area（）
.curve（d3.curveMonotoneX）
.x（函数（d）{返回x（d.date）；}）
.y0（高度）
.y1（函数（d）{返回y（d.PTS）；}）；
var area 2=d3.面积（）
.curve（d3.curveMonotoneX）
.x（函数（d）{返回x2（d.date）；}）
.y0（高度2）
.y1（函数（d）{返回y2（d.PTS）；}）；
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var focus=svg.append（“g”）
.attr（“类”、“焦点”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var context=svg.append（“g”）
.attr（“类”、“上下文”）
.attr（“transform”、“translate”（+margin2.left+）、“+margin2.top+”）；
d3.csv（“./data/kobe-playoff 1.csv”），类型、功能（错误、数据）{
如果（错误）抛出错误；
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.PTS；}）]；
x2.域（x.域（））；
y2.域（y.域（））；
设fixedData={}；
设arr=[]；
data.forEach（（d）=>{
固定数据[“日期”]=日期；
固定数据[“PTS”]=d.PTS；
arr.push（固定数据）；
fixedData={}；
})
//
focus.append（“路径”）
.基准面（arr）
.attr（“类别”、“区域”）
.attr（“d”，区域）；
//画点
焦点。选择全部（“圆圈”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“类”、“刷”）
//.attr（“类”、“刷”）
.attr（“r”，（d）=>{return（d.PTS）}）
.attr（“cx”，（d）=>{return x（d.date）}）
.attr（“cy”，（d）=>{返回y（d.PTS）}）
.样式（“填充”、“#552583”）；
//.on（“鼠标悬停”，功能（d）{
//tooltip.transition（）
//.持续时间（200）
//.样式（“不透明度”，.9）；
//html（d[“date”]+“
”（“+xValue（d））
//“+”，“+Y值（d）+”）
//.style（“左”（d3.event.pageX+5）+“px”）
//.style（“top”，（d3.event.pageY-28）+“px”）；
// })
//.开启（“鼠标出”，功能（d）{
//tooltip.transition（）
//.持续时间（500）
//.样式（“不透明度”，0）；
// });
focus.append（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
focus.append（“g”）
.attr（“类”、“轴--y”）
.呼叫（yAxis）；
context.append（“路径”）
.基准（数据）
.attr（“类别”、“区域”）
.attr（“d”，区域2）；
上下文。附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度2+”）
.呼叫（xAxis2）；
上下文。附加（“g”）
.attr（“类”、“刷”）
.呼叫（刷子）
.call（brush.move，x.range（））；
focus.append（“g”）
.attr（“类”、“缩放”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.呼叫（缩放）；
});
函数brushed（）{
if（d3.event.sourceEvent&&d3.event.sourceEvent.type==“缩放”）返回；//按缩放忽略笔刷
var s=d3.event.selection | | x2.range（）；
x、 域（s.map（x2.invert，x2））；
焦点。选择（“.area”）.attr（“d”，区域）；
焦点。选择（“.axis--x”）。调用（xAxis）；
svg.select（“.zoom”）.call（zoom.transform，d3.zoomIdentity
.刻度（宽度/（s[1]-s[0]））
.translate（-s[0]，0））；
}
函数缩放（）{
if（d3.event.sourceEvent&&d3.event.sourceEvent.type==“画笔”）返回；//忽略按画笔缩放
var t=d3.event.transform；
x、 域（t.rescaleX（x2.domain（））；
焦点。选择（“.area”）.attr（“d”，区域）；
焦点。选择（“.axis--x”）。调用（xAxis）；
context.select（“.brush”）.call（brush.move，x.range（）.map（t.invertX，t））；
}
功能类型（d）{
//d.date=解析日期（d.date）；
//d.价格=+d.价格；
//d.日期=新日期（d.日期）；
d、 date=date.parse（d.date）；
d、 PTS=+d.PTS；
返回d；
}

在笔刷和缩放功能中，需要选择圆并应用动态属性。但在此之前，需要为圆重命名类。比如：

// draw dots
focus.selectAll("circle")
  .data(data)
  .enter().append("circle")
    .attr("class", "circle")

function brushed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
  var s = d3.event.selection || x2.range();
  x.domain(s.map(x2.invert, x2));
  focus.select(".area").attr("d", area);
  focus.select(".axis--x").call(xAxis);
  focus.selectAll(".circle")
    .attr("r", (d)=>{return (d.PTS)})
    .attr("cx", (d)=>{return x(d.date)})
    .attr("cy", (d)=>{return y(d.PTS)})

  svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));
}

function zoomed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
  var t = d3.event.transform;
  x.domain(t.rescaleX(x2).domain());
  focus.select(".area").attr("d", area);
  focus.select(".axis--x").call(xAxis);
  focus.selectAll(".circle")
    .attr("r", (d)=>{return (d.PTS)})
    .attr("cx", (d)=>{return x(d.date)})
    .attr("cy", (d)=>{return y(d.PTS)})
  context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}