Блог

 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». Но также есть опция (которая закомментирована), которая дает каждому кругу свой собственный класс на основе данных. У меня есть функция, которая анимирует круги. Но я не знаю, как выбрать определенный круг щелчком мыши и позволить ему увеличиться и исчезнуть, в то время как другие не растут, а просто исчезают. Кто-нибудь может мне помочь, пожалуйста??

Вы на правильном пути, но вместо выбора элементов по их классу при переходе я бы просто привязал событие onclick к каждому кругу с помощью .on("click", ...) оператора. Затем у вас будет доступ к каждому отдельному кругу с помощью 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 здесь.

Поздно на вечеринку, но я думаю, это то, что вы хотите: скрипка

Чтобы «запомнить» выбранный круг и невыбранные круги, вам нужно что-то вроде следующего:

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

Как вы объяснили в комментариях в другом ответе, вы хотели выбрать круг и заставить этот круг расти и исчезать. Два других круга исчезнут. Вы также хотели запомнить, что было выбрано, а что нет.

Демонстрация скрипки позволяет щелкнуть по кругу, он будет расти и исчезать, остальные исчезнут. Нажмите на него еще раз, и он вернется к нормальному размеру, в то время как другие появятся снова.