dissociation block

forked from anonymous's block: dissociation block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
   var margin = {
                top: 50,
                right: 50,
                bottom: 50,
                left: 50
            },
            width = 1000 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

var svg = d3.select('#container')
            .append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
            .attr('filter', 'url(#goo)'); //引用defs里面的渐变元素 SVG滤镜

// 创建一个defs给g运动用 在defs元素中定义的图形元素不会直接呈现。
        var defs = svg.append('defs');
        var filter = defs.append('filter').attr('id', 'goo');
        filter.append('feGaussianBlur')
            .attr('in', 'SourceGraphic')
            .attr('stdDeviation', '15')
            .attr('result', 'blur');

filter.append('feColorMatrix')
            .attr('in', 'blur')
            .attr('mode', 'matrix')
            .attr('values', '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 25 -10')
            .attr('result', 'goo');

svg.append('circle')
            .attr('class', 'circleCenter')
            .attr('cx', width / 2)
            .attr('cy', height / 2)
            .attr('r', 80)
            .style('fill', 'tomato')
            .transition()
            .on('start', repeat1);

svg.append('circle')
            .attr('class', 'circleFly1')
            .attr('cx', width / 2)
            .attr('cy', height / 2)
            .attr('r', 80)
            .style('fill', 'tomato')
            .transition()
            .on('start', repeat2);

svg.append('circle')
            .attr('class', 'circleFly2')
            .attr('cx', width / 2)
            .attr('cy', height / 2)
            .attr('r', 80)
            .style('fill', 'tomato')
            .transition()
            .on('start', repeat3);

svg.append('circle')
            .attr('class', 'circleFly3')
            .attr('cx', width / 2)
            .attr('cy', height / 2)
            .attr('r', 80)
            .style('fill', 'tomato')
            .transition()
            .on('start', repeat4);

function repeat1() {
            d3.active(this)
                .attr('cx', width / 2)
                .attr('cy', height / 2)
                .attr('r', 80)
                .transition().duration(1000)
                .attr('cx', width / 2 + 100)
                .attr('cy', height / 2)
                .attr('r', 40)
                .transition().duration(1000)
                .attr('cx', width / 2 + 100)
                .attr('cy', height / 2 + 50)
                .attr('r', 40)
                .transition().duration(1000)
                .on('start', repeat1); // 再次启动

}

function repeat3() {
            d3.active(this)
                .attr('cx', width / 2)
                .attr('cy', height / 2)
                .attr('r', 80)
                .transition().duration(1000)
                .attr('cx', width / 2 + 100)
                .attr('cy', height / 2)
                .attr('r', 40)
                .transition().duration(1000)
                .attr('cx', width / 2 + 100)
                .attr('cy', height / 2 - 100)
                .attr('r', 40)
                .transition().duration(1000)
                .on('start', repeat3);

}

function repeat2() {
            d3.active(this)
                .attr('cx', width / 2)
                .attr('cy', height / 2)
                .attr('r', 80)
                .transition().duration(1000)
                .attr('cx', width / 2 - 50)
                .attr('cy', height / 2)
                .attr('r', 40)
                .transition().duration(1000)
                .attr('cx', width / 2 - 50)
                .attr('cy', height / 2 + 50)
                .attr('r', 40)
                .transition().duration(1000)
                .on('start', repeat2); // 再次启动

}

function repeat4() {
            d3.active(this)
                .attr('cx', width / 2)
                .attr('cy', height / 2)
                .attr('r', 80)
                .transition().duration(1000)
                .attr('cx', width / 2 - 50)
                .attr('cy', height / 2)
                .attr('r', 40)
                .transition().duration(1000)
                .attr('cx', width / 2 - 50)
                .attr('cy', height / 2 - 100)
                .attr('r', 40)
                .transition().duration(1000)
                .on('start', repeat4);

}

</script>
</body>

https://d3js.org/d3.v4.min.js