Javascript d3js：在d3js气泡图上应用转换

我有一个气泡图，其中我用以下方式制作气泡：

var circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", width / 2)
  .attr("cy", height / 2)
  .attr("opacity", 0.3)
  .attr("r", 20)
  .style("fill", "blue")
  .attr("cx", function(d) {
    return xscale(+d.admit_probability);
  })
  .attr("cy", function(d) {
    return yscale(+d.rank);
  })
  .on('mouseover', function(d, i) {
    d3.select(this)
      .attr("r", 32)
      .style("fill", "orange")
      .style("cursor", "pointer")
      .attr("text-anchor", "middle");

    texts.filter(function(e) {
        return e.rank === d.rank;
      })
      .attr("font-size", "20px")
  })
  .on('mouseout', function(d, i) {
    d3.select(this).transition()
      .style("opacity", 0.3)
      .attr("r", 20)
      .style("fill", "blue")
      .style("cursor", "default");
    texts.filter(function(e) {
        return e.rank === d.rank;
      }).attr("font-size", "10px")
  });

我尝试了不同的变换组合，如：

circles.transition().ease(d3.easeLinear);
circles.transition().ease("bounce");
circles.transition().ease("elastic");

---

但这些主题似乎都不起作用。我不知道如何给气泡赋予反弹效果。

如果你想要反弹效果，应该是：

.ease(d3.easeBounce)

以下是更改后的代码：

var保证金=40，
宽度=600，
高度=400；
风险值数据=[{
“承认概率”：54，
“排名”：20，
“c”：12
}, {
“承认概率”：79，
“排名”：111，
“c”：9
}, {
“承认概率”：70，
“排名”：68，
“c”：6
}, {
“承认概率”：12，
“排名”：1，
“c”：20
}, {
“承认概率”：197，
“排名”：87，
“c”：10
}];
var xscale=d3.scaleLinear（）
.域名(
d3.范围（数据、功能（d）{
收益率+d.接纳概率；
})
)
.尼斯
.范围（[0，宽度]）；
var yscale=d3.scaleLinear（）
.域（d3.范围（数据、函数（d））{
return+d.rank；
}))
.尼斯
.范围（[高度，0]）；
var xAxis=d3.axisBottom（）.scale（xscale）；
var yAxis=d3.axisLeft（）.scale（yscale）；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'类'，'图表'）
.attr（“宽度”，宽度+边距+边距）
.attr（“高度”，高度+边距+边距）
.附加（“g”）
.attr（“转换”、“转换”（“+margin+”，“+margin+”））；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var circles=svg.selectAll（空）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，宽度/2）
.attr（“cy”，高度/2）
.attr（“不透明度”，0.3）
.attr（“r”，20）
.style（“填充”、“蓝色”）
.attr（“cx”，功能（d）{
返回x标度（+d.接纳概率）；
})
.attr（“cy”，函数（d）{
返回yscale（+d.rank）；
})
.on（'mouseover'，函数（d，i）{
d3.选择（this）.transition（）
.持续时间（1000）
.轻松（d3.轻松反弹）
.attr（“r”，32）
.样式（“填充”、“橙色”）；
文本。过滤器（功能（e）{
返回e.rank==d.rank；
}).transition（）
.持续时间（1000）
.轻松（d3.轻松反弹）
.attr（“字体大小”，“20px”）
})
.on（'mouseout'，函数（d，i）{
d3.选择（this）.transition（）
.样式（“不透明度”，0.3）
.attr（“r”，20）
.样式（“填充”、“蓝色”）；
文本。过滤器（功能（e）{
返回e.rank==d.rank；
}).attr（“字体大小”，“10px”）
})
//.轻松（“弹性”）；
var text=svg.selectAll（空）
.数据（数据）
.输入（）
.append（'文本'）
.attr（“x”，函数（d）{
返回x标度（+d.接纳概率）；
})
.attr（“文本锚定”、“中间”）
.attr（“y”，函数（d）{
返回yscale（+d.rank）；
})
.文本（“Hi”）
.attr（“指针事件”、“无”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“10px”）
.attr（“填充”、“红色”）；
svg.append（“文本”）
.attr（“变换”、“平移”（+（宽度/2）+）、“+（高度+边距）+”）
.style（“文本锚定”、“中间”）
.文本（“平均验收”）；
svg.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，0-边距）
.attr（“x”，0-（高度/2））
.attr（“dy”、“1em”）
.style（“文本锚定”、“中间”）
.文本（“排名”）
非常感谢您的回复。事实上，我试着将这种效果不仅应用于鼠标上，还应用于所有的圆圈。这就是为什么我试着做一些类似于circles.transition（）.duration（1000.ease）（d3.easebunce）的事情；这是行不通的。我不理解这个问题。你必须在转换后设置一些属性：转换到什么？我不理解；我不明白。我必须设置什么属性？您将鼠标上的transition应用于特定圆的方式，我希望将其应用于所有圆。我该怎么做？再次感谢！我想我无法正确地描绘我试图产生的效果。我可能会为它添加链接。无论如何，谢谢：）