Javascript 使用d3js选择要设置动画的特定类

我有3个圆圈，我想点击其中一个。当我点击其中一个时，我希望它变大并消失。其他两个圆圈也应该消失，但不应该变大。现在我将每个圆的类命名为圆圈1。但也有一个选项被注释掉，根据数据为每个圆提供自己的类。我有一个函数，它可以给圆设置动画。但我不知道如何用鼠标点击选择一个特定的圆圈，让它变大并消失，而其他的则不增长而只是消失。有谁能帮我一下吗？？？

您的思路是正确的，但是我不想在转换中按类选择元素，而是使用.onclick。。。操作人员然后，您可以使用d3访问每个圆圈。选择此项。下面是一个使用circles1.onclick的示例。。。函数在这里我选择如何通过原始数据中的索引I设置圆的动画，但也可以通过d值进行过滤：

---

准时完成工作。

晚会迟到了，但我想这正是你想要的：

要记住选定的圆和未选定的圆，需要以下内容：

.on("click", function(d, i){
    if (i == 0){
       d3.select(this).transition()
         .delay(0)
         .duration(2000)
         .attr("r", d)
         .style("opacity", 0);
    }
    else{
        d3.select(this)
          .transition()
          .delay(0)
          .duration(2000)
          .style("opacity", 0);
    }
});

然后稍微修改一下@mdml的答案：

var grow;
var disappear;

正如您在另一个答案的评论中所解释的，您希望选择一个圆，并使该圆增长和消失。其他两个圆圈将逐渐消失。您还想记住哪些被选中，哪些未被选中

---

小提琴演示可以让你点击一个圆圈，它会变大和消失，其他的会消失。再次单击它，它将恢复到正常大小，而其他的将重新出现。

谢谢，但它似乎只在第一个圆上起作用。我想选择一个圆圈，那个圆圈变大，其他圆圈消失。我还想让它记住选择了哪个圆。@michAmir:我想我不明白你的意思。你只想点击一个圆圈，让它变大消失，让其他的消失？你所说的记住选择了哪个圆是什么意思？

var grow;
var disappear;

.on("click", function (d, i) {
    // This is an assumption, I thought you wanted to remember
    // so that you can toggle those states.
    if (grow && disappear) {
        disappear.transition()
            .delay(0)
            .duration(2000)
            .style("opacity", 1);

        grow.transition()
            .delay(0)
            .duration(2000)
            .style("opacity", 1)
            .attr("r", d / 10);

        grow = null;
        disappear = null;
    } else {
        var g = d3.selectAll("circle");
        disappear = g.filter(function (v, j, a) {
            return i !== j;
        });
        grow = g.filter(function (v, j, a) {
            return i === j;
        });

        disappear.transition()
            .delay(0)
            .duration(2000)
            .style("opacity", 0);

        grow.transition()
            .delay(0)
            .duration(2000)
            .attr("r", d)
            .style("opacity", 0);
    }
});