D3（v3）在点击另一个之后重置之前动画的圆圈

Question

我的视图中有不同大小（d3.pack（））动态生成的圆圈。现在我在其上添加了一个click事件，以便在点击它时它会展开。现在，我想在点击另一个圆圈时优雅地重置？我的重置类似于这个答案D3 - Resetting an SVG object animation

但这是我的代码片段

 var objects= [
                { id: '1477', amounts: 7, color: '#ffd800' },
                { id: '1490', amounts: 10, color: '#b65959' },
                { id: '1300', amounts: 90, color: '#ff006e' },
                { id: '4000', amounts: 50, color: '#ffd800' },
                { id: '9000', amounts: 20, color: '#b20101' },
                { id: '1212', amounts: 28, color: '#ff006e' },
                { id: '2323', amounts: 7, color: '#ffd800' }
            ]

 var width = 700,
            height = 800,
            color = d3.scale.category20b(),
            maxDiameter = 500;

        var container = d3.select('.chart')
        var svg = container.append('svg')
                    .attr('width', maxDiameter * 2)
                    .attr('height', maxDiameter)
                    .attr('class', 'bubble')

        var bubble = d3.layout.pack()
                        .sort(null)
                        .size([maxDiameter, maxDiameter])
                         .value(function (d) { return d.size; })
                        .padding(1.5)

        var nodes = bubble
                    .nodes(processData(objects))
                    .filter(function (d) {
                        return !d.children;
                    })

        var gCircle = svg.append('g')
        var circle = gCircle.selectAll('circle')
                        .data(nodes)
                        .enter()
                        .append('circle')
                        .attr('transform', function (d) {
                            return 'translate(' + d.x + ',' + d.y + ')';
                        })
                        .attr('r', function (d) {
                            return d.r;
                        })
                        .attr('fill', function (d) { return d.color;})
                        .attr('class', function (d) { return d.className; })

    // onclick

    circle.on('click', function (e, i) {
        d3.select(this).transition()
              .attr("x", function (d) {
                  console.log('d x ' + d.x);
                  return d.x;
              })
              .attr("y", function (d) {
                  console.log('d y ' + d.y);
                  return d.y;
              })
              .attr("r", function (d) {
                  console.log('d r ' + d.r);
                  return d3.select(this).attr('r') == d.r ? (d.r * 100) : d.r;
              })
              .duration(500);

        });
    function processData(data) {
            var obj = data;

            var newDataSet = [];

            for (var l = 0; l < obj.length; l++) {
                var objInData= obj[l];
                newDataSet.push({ name: objInData.id, className: objInData.id, size: objInData.amounts, color: objInData.color });
            }
            return { children: newDataSet };
        }

Answer 1

在展开点击的圈子之前，将所有其他圈子设置为初始大小：

circle.transition()
    .duration(500)
    .attr('r', function (d) {
        return d.r;
    });

以下是演示：

＆＃13;

＆＃13;

 var objects= [
                { id: '1477', amounts: 7, color: '#ffd800' },
                { id: '1490', amounts: 10, color: '#b65959' },
                { id: '1300', amounts: 90, color: '#ff006e' },
                { id: '4000', amounts: 50, color: '#ffd800' },
                { id: '9000', amounts: 20, color: '#b20101' },
                { id: '1212', amounts: 28, color: '#ff006e' },
                { id: '2323', amounts: 7, color: '#ffd800' }
            ]

 var width = 500,
            height = 400,
            color = d3.scale.category20b(),
            maxDiameter = 500;

        var container = d3.select('body')
        var svg = container.append('svg')
                    .attr('width', maxDiameter * 2)
                    .attr('height', maxDiameter)
                    .attr('class', 'bubble')

        var bubble = d3.layout.pack()
                        .sort(null)
                        .size([maxDiameter, maxDiameter])
                         .value(function (d) { return d.size; })
                        .padding(1.5)

        var nodes = bubble
                    .nodes(processData(objects))
                    .filter(function (d) {
                        return !d.children;
                    })

        var gCircle = svg.append('g')
        var circle = gCircle.selectAll('circle')
                        .data(nodes)
                        .enter()
                        .append('circle')
                        .attr('transform', function (d) {
                            return 'translate(' + d.x + ',' + d.y + ')';
                        })
                        .attr('r', function (d) {
                            return d.r;
                        })
                        .attr('fill', function (d) { return d.color;})
                        .attr('class', function (d) { return d.className; })

    // onclick

    circle.on('click', function (e, i) {
				circle.transition().duration(500).attr('r', function (d) {
                            return d.r;
                        })
        d3.select(this).transition()
              .attr("x", function (d) {
                  return d.x;
              })
              .attr("y", function (d) {
                  return d.y;
              })
              .attr("r", function (d) {
                  return d3.select(this).attr('r') == d.r ? (d.r * 2) : d.r;
              })
              .duration(500);

        });
    function processData(data) {
            var obj = data;

            var newDataSet = [];

            for (var l = 0; l < obj.length; l++) {
                var objInData= obj[l];
                newDataSet.push({ name: objInData.id, className: objInData.id, size: objInData.amounts, color: objInData.color });
            }
            return { children: newDataSet };
        }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

PS：在这个演示中，圆圈正在扩展到r * 2，而不是扩展到r * 100。