Built with blockbuilder.org
forked from anonymous's block: dissociation block
forked from anonymous's block: dissociation block
xxxxxxxxxx<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