在d3 js中创建带有阈值边界的气泡图

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xScale = d3.scaleLinear()
  .domain([minX, maxX])
  .range([padding, width - padding]);

var yScale = d3.scaleLinear()
  .domain([minY, maxY])
  .range([height - padding, padding]);

var radiusScale = d3.scaleSqrt()
  .domain([minSize, maxSize])
  .range([minRadius, maxRadius]);

var colorScale = d3.scaleOrdinal()
  .domain(categories)
  .range(colors);

var bubbles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return xScale(d.x); })
  .attr("cy", function(d) { return yScale(d.y); })
  .attr("r", function(d) { return radiusScale(d.size); })
  .attr("fill", function(d) { return colorScale(d.category); });

var threshold = 0.5; // 阈值

var boundary = svg.append("line")
  .attr("x1", padding)
  .attr("y1", yScale(threshold))
  .attr("x2", width - padding)
  .attr("y2", yScale(threshold))
  .attr("stroke", "red")
  .attr("stroke-width", 2);

bubbles.on("mouseover", function(d) {
  // 鼠标悬停时的操作
})
.on("click", function(d) {
  // 点击时的操作
});