SVG Animation Follow Path - d3js
How do I make an svg animation follow path - d3js?
What is a svg animation follow path - d3js? How do you make a svg animation follow path - d3js? This script and codes were developed by Dzulfikar Adi Putra on 06 September 2022, Tuesday.
SVG Animation Follow Path - d3js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Animation Follow Path - d3js</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Pure SVG Animation Follow Path - d3js</h1> <hr/> <ul> <li>Follow this <a href="http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_animation">tutorial</a>, but generate the data based on json.</li> <li>Render the svg using d3js function.</li> <li>Zoom in and zoom out by mouse scrolling.</li> <li>Move view by mouse dragging.</li> </ul> <h3></h3> <svg></svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://d3js.org/d3.v3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
SVG Animation Follow Path - d3js - Script Codes CSS Codes
body { background: #232438; color: #fff;
}
a { color: yellow;
}
svg { background: #32344F; border: 1px solid #292A3F; border-radius: 25px;
}
g.container { stroke: #eaeaea; border: #eaeaea;
}
path { fill: none; stroke: #fff; stroke-width: 2;
}
#piece { fill: #000;
}
SVG Animation Follow Path - d3js - Script Codes JS Codes
data = { 1:{ ST:[ { caseId:[ {id:'1', case:'case1', speed:10, color:'#24A9A8'}, {id:'2', case:'case2', speed:5, color:'#24A9A8'}, {id:'3', case:'case3', speed:15, color:'#24A9A8'}, ] } ] }, 10:{ ST:[ { caseId:[ {id:'4', case:'case1', speed:8, color:'#116360'}, {id:'5', case:'case2', speed:9, color:'#116360'}, {id:'6', case:'case3', speed:13, color:'#116360'}, ] } ] },
};
var zoom = d3.behavior.zoom() .scaleExtent([0.2, 3]) .on("zoom", zoomed);
var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended);
var svg = d3.select('svg') .attr('width',800) .attr('height',800) .call(zoom);;
var container = svg.append('g').attr('class','container');
var defs = svg.append('defs');
var path = container.append('path') .attr('id','shape') .attr('d', 'M 115,169 S 149,424 460,555 S 608,367 568,157 S 438,108 174,57 S 97,90 115,169');
/* generate circle */
for(var time in data){ //console.log(data[time].ST); console.log('time:' + time) var ST = data[time].ST; for(var time2 in ST ){ //console.log(ST[time2]); caseId = ST[time2].caseId; for(var event in caseId){ console.log(caseId[event].id); container.append('circle') .attr('id', caseId[event].id) .attr('fill',caseId[event].color) .attr('cx',0) .attr('cy',0) .attr('r', 10); defs.append('animateMotion') .attr('xlink:href', '#'+caseId[event].id) .attr('start', time+'s') .attr('dur', caseId[event].speed+'s') .attr('rotate', 0) .attr('repeatCount','indefinite') .append('mpath') .attr('xlink:href', '#shape'); } }
}
function zoomed() { container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true);
}
function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) { d3.select(this).classed("dragging", false);
}
Developer | Dzulfikar Adi Putra |
Username | superpikar |
Uploaded | September 06, 2022 |
Rating | 4 |
Size | 3,068 Kb |
Views | 56,672 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by Dzulfikar Adi Putra | 8,016 Kb |
Bulma breadcrumbs | 1,895 Kb |
D3JS Simple JSON SVG barchart vertical | 2,234 Kb |
Ionic - Wordpress REST API starter | 2,961 Kb |
Ionic tabs in the middle of the screen | 3,727 Kb |
Vue v1 Search and Pagination | 4,859 Kb |
Play and Pause Bootstrap 3 Button | 2,255 Kb |
Expand and collapse element using jquery expander | 1,854 Kb |
Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object | 3,127 Kb |
JS Tree Example JSON Data | 2,435 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Sticky div | Kaslab | 2,225 Kb |
Whyutils | LeYvan | 3,752 Kb |
Polygon Logo in CSS | Kai | 3,412 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Mario | Takaneichinose | 3,902 Kb |
Price | Catcode | 2,623 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!