在动画线条图中更改在线条中移动的标记的大小

// 假设我们有一个简单的折线图
const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");

const data = [
  { x: 1, y: 5 },
  { x: 2, y: 9 },
  { x: 3, y: 7 },
  // 更多数据点
];

const xScale = d3.scaleLinear().domain([1, data.length]).range([0, width]);
const yScale = d3.scaleLinear().domain([0, 10]).range([height, 0]);

const line = d3.line()
  .x(d => xScale(d.x))
  .y(d => yScale(d.y));

svg.append("path")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1.5)
  .attr("d", line);

// 更改标记大小
svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", d => xScale(d.x))
    .attr("cy", d => yScale(d.y))
    .attr("r", d => d.y > 7 ? 8 : 4); // 根据数据值动态调整标记大小