使用d3js選擇特定的類進行動畫處理

Question

var data1 = [150,350,550]

var data2 = [100,300,500]

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

var circles1 = sampleSVG
    .append("g")
    .attr("class", "circles1")
    .selectAll(".circle1")
    .data(data1)
    .enter()
    .append("circle")
    .attr("class", "circle1")
    .on("mousedown", animateFirstStep);




var circleAttributes1 = circles1
    .attr("cx", function (d) { return d;})
    .attr("cy", 200)
    //.attr("class", function (d) { return "circle" + d;})
    .attr("r", function(d) { return d/10;})
    .style("fill", function(d){
        var color;
        if (d === 150){ color = "yellow";
        } else if (d === 350) { color = "orange";
        } else if (d === 550) { color = "red";
        } return color;
    })


function animateFirstStep(){
    d3.selectAll(...??...)
      .data(data1,function(d, i) { return d; })
      .transition()
      .delay(0)
      .duration(2000)
      .attr("r", 400)
      .style("opacity", 0)
      .each("end", animateSecondStep);
};

我有3個圈子，我想點擊其中一個。 當我單擊某個按鈕時，我希望該按鈕變大並消失。 其他2個圈子也應該消失，但不應再擴大。 現在，我將每個圓的類別簡單地命名為“ circle1”。 但同時也提供了一個選項（已注釋掉），該選項根據數據為每個圓圈提供自己的類。 我有一個使圈子動起來的功能。 但是我不知道如何通過鼠標單擊來選擇一個特定的圓，然后讓該圓變大並消失，而其他圓不變而僅消失。 有人可以幫我嗎？

Answer 1

您處在正確的軌道上，但是我沒有使用過渡中的元素來選擇元素，而是使用.on("click", ...)運算符將onclick事件綁定到每個圓上。 然后，您將可以使用d3.select(this)訪問每個單獨的圈子。 這是您可以使用circles1.on("click", ...)函數的示例（在這里，我選擇如何通過圓在原始數據中的索引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);
    }
});

在這里完成JSfiddle的工作。

Answer 2

派對晚了，但是我想這就是你想要的： Fiddle

要“記住”所選圈子和未選中圈子，您需要類似以下內容：

var grow;
var disappear;

然后修改@mdml的答案：

.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);
    }
});

正如您在其他答案的注釋中解釋的那樣，您想要選擇一個圓圈並使該圓圈增大並消失。 其他兩個圓圈將消失。 您還想記住哪些被選中，哪些未被選中。

Fiddle演示使您可以單擊一個圓圈，該圓圈將成長並消失，其他圓圈將褪色。 再次單擊它，它將恢復為正常大小，而其他將重新出現。