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 here。

Answer 2

晚会，但我认为这就是你想要的：Fiddle

要记住＆＃34;选定的圆圈和未选中的圆圈，您需要以下内容：

var grow;
var disappear;

然后修改@ mdml＆＃39; s回答：

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

正如您在其他答案的评论中所解释的那样，您想要选择一个圆圈并使该圆圈成长并消失。其他两个圈子将逐渐消失。你还想记住哪些是被选中的，哪些不是。

小提琴演示使您可以点击一个圆圈，它会增长并消失，其他人将会褪色。再次单击它将恢复正常大小，而其他将重新出现。

选择具有d3js的特定类来设置动画

2 个答案: