javascript - D3 (v3) 在单击另一个圆后重置先前的动画圆

Question

我有在我的 View 上动态生成的不同大小的圆圈 (d3.pack()) 。现在我在其上添加了一个单击事件，以便在单击时它会展开。现在，我想在单击另一个圆圈时优雅地重置？我进行了类似于此答案的重置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;
    });

这是演示:

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

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

PS:在本演示中，圆圈没有扩展到 r*100，而是仅扩展到 r*2。