/**
 * 为数据点添加 tooltip 提示框
 */
// 通过在 <circle> 内添加 <title> 元素实现鼠标悬浮时显示提示框
pointsContainer.selectAll('circle')
  .append('title') // 在 <circle> 元素内添加一个 <title> 元素
  .text((d) => { // 入参数据继承自父级 <circle> 所绑定的数据
    return `mpg: ${X[d]}, hp: ${Y[d]}` // 设置 tooltip 内容
  })
// 同时也在标注元素 <text> 内添加 <title> 元素，也可以实现鼠标悬浮时显示提示框
labelsContainer.selectAll("text")
  .append('title')
  .text((d) => {
    return `mpg: ${X[d]}, hp: ${Y[d]}`
  })

/**
 * 构建辅助线，并在坐标轴显示相应的值
 */
// 辅助线容器
const guidesContainer = svg
  .append("g")
  .style("opacity", 0) // 默认不显示
  .attr("stroke", "black") // 设置辅助线的颜色
  .attr("stroke-dasharray", 5); // 将辅助线设置为虚线
const guidesParallel = guidesContainer.append("line"); // 水平辅助线
const guidesVertical = guidesContainer.append("line"); // 垂直辅助线
// 同时在坐标轴上相应的位置显示（当前鼠标所在的位置）所对应的值
const xValue = svg
  .append("text")
  .attr("transform", `translate(0, ${height - 14})`) // 在横坐标显示的值定位到容器的底部
  .attr("font-size", 14) // 设置字体大小
  .style("opacity", 0); // 默认不显示
const yValue = svg.append("text").attr("font-size", 14).style("opacity", 0);
// 监听鼠标在散点图上的移动相关事件
svg
  .on("mouseover", function () {
    // 当鼠标进入散点图时，将辅助线及坐标轴上相应的值显示出来
    // 设置不同的透明度进行视觉上的优化
    guidesContainer.style("opacity", 0.3);
    xValue.style("opacity", 0.5);
    yValue.style("opacity", 0.5);
  })
  .on("mouseout", function () {
    // 当鼠标离开散点图时，隐藏辅助线及坐标轴上相应的值
    guidesContainer.style("opacity", 0);
    xValue.style("opacity", 0);
    yValue.style("opacity", 0);
  })
  .on("mousemove", function (event) {
    // 当鼠标在散点图上移动时，获取鼠标的位置（相对于 svg 元素）
    const [xPos, yPos] = d3.pointer(event);
    // 设置横坐标轴的值
    xValue
      .attr("x", xPos - 14) // 该值在（横坐标轴容器里）横向位置移动（和鼠标的位置一样）xPos - 14
      .attr("fill", "black") // 设置字体颜色
      // 调用比例尺的 invert() 方法，通过位置（range 值域）反向求出对应的（domain 定义域）值
      // 由于反向求出的值可能具有多位小数，根据原始数据的精度，保留一位小数
      .text(d3.format(".1f")(xScale.invert(xPos)));
    // 设置纵坐标的值
    yValue
      .attr("y", yPos) // 该值在（纵坐标轴容器里）纵向位置移动（和鼠标的位置一样）yPos
      .attr("fill", "black")
      .text(d3.format(".0f")(yScale.invert(yPos)));
    // 设置水平辅助线的位置
    guidesParallel
      // x1 和 y1 属性设置线段的起点，x2 和 y2 属性设置线段的终点
      .attr("x1", xScale(xDomain[0]) - insetLeft)
      .attr("y1", yPos)
      .attr("x2", xScale(xDomain[1]) + insetRight)
      .attr("y2", yPos);
    // 设置垂直辅助线的位置
    guidesVertical
      .attr("x1", xPos)
      .attr("y1", yScale(yDomain[0] - insetTop))
      .attr("x2", xPos)
      .attr("y2", yScale(yDomain[1] + insetRight));
  });

function debounce(delay = 500) {
  // ...
  // 重新设置计时器，倒计时重新计算
  timer = setTimeout(function () {
    // ...
    if (w !== width || h !== height) {
      //...
      // 先取消在散点图上设置的鼠标移动监听器
      svg.on("mousemove", null);
      // 使用新的比例尺计算辅助线和坐标轴显示相应的值
      xValue.attr("transform", `translate(0, ${h - 14})`); // 修正横坐标上显示值的位置
      // 重新设置在散点图上设置的鼠标移动监听器
      svg.on("mousemove", function (event) {
        const [xPos, yPos] = d3.pointer(event);
        xValue
          .attr("x", xPos - 14)
          .attr("fill", "black")
          .text(d3.format(".1f")(newXScale.invert(xPos)));
        yValue
          .attr("y", yPos)
          .attr("fill", "black")
          .text(d3.format(".0f")(newYScale.invert(yPos)));
        guidesParallel
          .attr("x1", newXScale(xDomain[0]) - insetLeft)
          .attr("y1", yPos)
          .attr("x2", newXScale(xDomain[1]) + insetRight)
          .attr("y2", yPos);
        guidesVertical
          .attr("x1", xPos)
          .attr("y1", newYScale(yDomain[0] - insetTop))
          .attr("x2", xPos)
          .attr("y2", newYScale(yDomain[1] + insetRight));
      });
    }
    timer = null;
  }, delay);
}

/**
 *
 * 当鼠标悬停在数据点时，高亮数据点并在坐标轴中显示相应的值
 *
 */
// 使用 <foreignObject> 元素来包含普通的 HTML 元素，便于使用 CSS 设置丰富的样式
// 设置横坐标轴上的数据点的值的高亮显示
const xForeign = svg
  .append('foreignObject')
  .attr('width', 50) // 设置该容器的大小尺寸
  .attr('height', 30)
  // 在横坐标显示的值定位到容器的底部，并结合容器的大小进行位置调整，以正好覆盖住辅助线的值
  .attr("transform", `translate(0, ${height - marginBottom / 2})`)
  .style('opacity', 0) // 默认不显示
// 设置 <foreignObject> 元素内的 HTML 元素的样式
const xDom = xForeign.append('xhtml:div')
  .style('width', '50px')
  .style('height', '30px')
  .classed('activeDotValue', true) // 添加一个类名 activeDotValue，这样就可以使用 CSS 来设置样式外观
// 设置纵坐标轴上的数据点的值的高亮显示
const yForeign = svg
  .append('foreignObject')
  .attr('width', 50)
  .attr('height', 30)
  .style('opacity', 0)
const yDom = yForeign.append('xhtml:div')
  .style('width', '50px')
  .style('height', '30px')
  .classed('activeDotValue', true)
// 监听鼠标在数据点上的移动相关事件
pointsContainer.selectAll("circle")
  .on('mouseover', function (event, d) {
    // 当鼠标移入数据点时，为该元素添加类名 activeDot
    // 使用 CSS 为具有该类名的元素设置填充色为红色
    this.classList.add('activeDot');
    xDom.text(X[d]); // 设置在横坐标上数据点的相应数据
    yDom.text(Y[d]); // 设置在纵坐标上数据点的相应数据
    // 调整元素在横坐标上的位置，并显示出来
    xForeign
      // 调用比例尺计算出该数据点的（domain 定义域）值计算出对应的（range 值域）位置
      // 进行一些位置调整以正好覆盖住辅助线的值
      .attr('x', xScale(X[d]) - 25)
      .style('opacity', 1)
    // 调整元素在纵坐标上的位置，并显示出来
    yForeign.style('opacity', 1)
      .attr('y', yScale(Y[d]) - 15)
  })
  .on('mouseleave', function (event, d) {
    // 当鼠标移出数据点时，为该元素移除类名 activeDot
    this.classList.remove('activeDot')
    // 并隐藏元素
    xForeign.style('opacity', 0)
    yForeign.style('opacity', 0)
  })

.activeDot {
  fill: #f87171;
  stroke: #f87171;
}
.activeDotValue {
  background-color: #f87171;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.375rem;
}

function debounce(delay = 500) {
  // ...
  timer = setTimeout(function () {
    // ...
    // 当页面的宽度或高度改变时
    if (w !== width || h !== height) {
      // ...
      /**
       *
       * 重新设置数据点在坐标轴中高亮显示的值的位置
       *
       */
      // 先取消在数据点上设置的鼠标移动监听器
      pointsContainer.selectAll("circle")
        .on('mouseover', null)
      // 使用新的比例尺计算高亮显示的值的位置
      xForeign
        .attr("transform", `translate(0, ${h - marginBottom / 2})`)
      pointsContainer.selectAll("circle")
        .on('mouseover', function (event, d) {
          this.classList.add('activeDot');
          xDom.text(X[d]);
          yDom.text(Y[d]);
          xForeign
            .attr('x', newXScale(X[d]) - 25)
            .style('opacity', 1)
          yForeign.style('opacity', 1)
            .attr('y', newYScale(Y[d]) - 15)
        })
    }
    // 执行完核心代码后，清空计时器 timer
    timer = null;
  }, delay);
}

// ...
// 创建一个刷选器
const brush = d3.brush()
  // 监听刷选的全过程（刷选在不同过程会分发三个不同类型的事件），触发回调函数 brushed
  .on("start brush end", brushed);
// ...
// 刷选发生时所触发的回调函数
// 其中只将入参的刷选事件对象解构出 selection 选区属性
function brushed({selection}) {
  // ...
  if (selection) {
    // 如果用户创建了选区
    // 从选区解构出（矩形选区四个角落）各个坐标值
    const [[x0, y0], [x1, y1]] = selection;
    value = dot
      .style("stroke", "gray") // 先将所有的数据点设置为灰色
      // 筛选出所有数据点中满足条件的元素（构成新的选择集），即在 [[x0, y0], [x1, y1]] 范围内的数据点
      .filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1)
      .style("stroke", "steelblue") // 将选区范围内的数据点设置为蓝色
      .data(); // 返回选择集中的元素所绑定的数据所构成的一个数组
  } else {
    // 如果用户取消了选区
    dot.style("stroke", "steelblue"); // 将所有的数据点恢复为蓝色
  }
  // ...
}