d3.js -如何在弹出窗口中显示链接相关数据(如源和目标)

<script src="https://d3js.org/d3.v7.min.js"></script>

<div id="popup" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;">
  <!-- 弹出窗口内容 -->
</div>

// 假设源和目标元素具有class为"link"，你可以使用以下代码选择这些元素
const links = d3.selectAll(".link");

// 绑定数据到弹出窗口
links.on("click", function(d) {
  // 获取链接相关数据
  const source = d.source;
  const target = d.target;

  // 在弹出窗口中显示链接相关数据
  showPopup(source, target);
});

function showPopup(source, target) {
  // 获取弹出窗口元素
  const popup = document.getElementById("popup");

  // 更新弹出窗口内容
  popup.innerHTML = `源：${source}<br>目标：${target}`;

  // 显示弹出窗口
  popup.style.display = "block";
}