如何在d3.js中仅在单击/悬停时显示具有特定属性值的数据

// 准备数据
var data = [
  { name: "A", value: 10 },
  { name: "B", value: 20 },
  { name: "C", value: 30 }
];

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 200);

// 绑定数据
var circles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d, i) { return (i + 1) * 100; })
  .attr("cy", 100)
  .attr("r", function(d) { return d.value; })
  .style("fill", "steelblue");

// 添加事件监听器
circles.on("click", function(d) {
  var selectedCircle = d3.select(this);
  var display = selectedCircle.style("display");
  selectedCircle.style("display", display === "none" ? "block" : "none");
});

circles.on("mouseover", function(d) {
  d3.select(this).style("fill", "red");
});

circles.on("mouseout", function(d) {
  d3.select(this).style("fill", "steelblue");
});