svg manipulation app - record and play svg manipulations [closed] - d3.js

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm looking to build a moble app where the user can take an SVG image, manipulate it under a "recording", and then send the recording to a friend for them to "replay".
I have some experience with D3.js and have also looked at Snap.svg library for SVG manipulation but I'm not fully wrapping my head around how to implement this.
In particular, what's a good way to be able to save the manipulations the user is making and then "replay" them? For example, I can use D3.js to manipulate the SVG, but since this is code-based, I can't exactly "serialize" the animation in order to send to someone else and for them to be able to "replay" it. I don't want to go down the route of code generation..
Any ideas how to do this?

Answer 1

I am not sure how complex your application targets are. However, it is easy to serialise updates in an SVG as JSON array and replay them using d3. Here is a small example for the same.
Steps:
Update SVG by using update buttons.
Revert the chart by clicking on clear button.
Now click play button to replay the last updates.
var defaults = [{
key: "r",
val: 15,
type: "attr"
}, {
key: "fill",
val: "blue",
type: "style"
}];
var updates = [];
var c20 = d3.scale.category20();
var circles = d3.selectAll("circle");
d3.select("#increase_rad")
.on("click", function() {
var val = parseInt(d3.select("circle").attr("r")) + 1;
circles.attr("r", val);
updates.push({
"key": "r",
"val": val,
"type": "attr"
});
enableButton();
});
d3.select("#decrease_rad")
.on("click", function() {
var val = parseInt(d3.select("circle").attr("r")) - 1;
circles.attr("r", val);
updates.push({
"key": "r",
"val": val,
"type": "attr"
});
enableButton();
});
d3.select("#change_color")
.on("click", function() {
var val = c20(Math.floor(Math.random() * (18) + 1));
circles.style("fill", val);
updates.push({
"key": "fill",
"val": val,
"type": "style"
});
enableButton();
});
d3.select("#clear")
.on("click", function() {
applyEffects(defaults);
});
d3.select("#play")
.on("click", function() {
applyEffects(updates);
});
function applyEffects(effects, delay) {
var trans = circles.transition()
effects.forEach(function(update) {
if (update.type == "attr") {
trans = trans.attr(update.key, update.val).transition();
} else {
trans = trans.style(update.key, update.val).transition();
}
});
}
function enableButton() {
d3.select("#clear").attr("disabled", null);
d3.select("#play").attr("disabled", null);
}
svg {
background: white;
}
.link {
stroke: black;
}
.node {
fill: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div>
<input type="button" value="Clear" id="clear" disabled />
<input type="button" value="Play" id="play" disabled />
<br/>
<br/>
<input type="button" value="Increase Radius" id="increase_rad" />
<input type="button" value="Decrease Radius" id="decrease_rad" />
<input type="button" value="Change Color" id="change_color" />
</div>
<svg width="250" height="250">
<g id="links">
<line class="link" x1="138.0538594815113" y1="55.927846328346924" x2="58.77306466322782" y2="110.43892621419347"></line>
<line class="link" x1="138.0538594815113" y1="55.927846328346924" x2="195.04044384802015" y2="133.44259356292176"></line>
</g>
<g id="nodes">
<g class="node" transform="translate(138.0538594815113,55.927846328346924)">
<circle r=15></circle>
</g>
<g class="node" transform="translate(58.77306466322782,110.43892621419347)">
<circle r=15></circle>
</g>
<g class="node" transform="translate(195.04044384802015,133.44259356292176)">
<circle r=15></circle>
</g>
</g>
</svg>