score:1

Accepted answer

In your brushed and zoomed functions, you need to select your circles and apply dynamic attributes. But before you do that, you need to rename the class for your circles. Something like:

// 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));
}

Related Query

More Query from same tag