JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<script src="https://rawgit.com/cool-Blue/d3-lib/master/Output/log/log.js"></script>
<div id="log"></div>
<div id="logTween"></div>

CSS

#log

JavaScript

var log = d3.ui.log("#log").style("vertical-align", "top"),
	logTween = d3.ui.log("#logTween").style("vertical-align", "top"),
    stoppedTween = false,
    stopped = false;

var rect = d3.select("body")
    .insert("svg", "#log").attr("width", 200).attr("height", 200).append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("fill", "black")
    .attr("width", 100)
    .attr("height", 100)
    .attr("transform", "rotate(0,0,0)");

rect.transition()
    .ease("linear")
    .duration(1000)
    .attr("transform", "rotate(180,100,100)")
    .each("start", function () {
    d3.timer(function () {
        var t = d3.transform(rect.attr("transform"));
        log.writeLine([t.translate.map(f).join(","), f(t.rotate)].join("\t"))
        return stopped;
    })
})
    .each("end", function () {
    stopped = true
});
var svg = d3.select("body").insert("svg", "#logTween").attr("width", 200).attr("height", 200);

var rectTween = svg.append("rect")
    .attr("x", 50)
    .attr("y", 50)
    .attr("width", 100)
    .attr("height", 100);


rect.transition().duration(1000)
    .attrTween("transform", rotTween)
    .each("start", function () {
    d3.timer(function () {
        var t = d3.transform(rectTween.attr("transform"));
        logTween.writeLine([t.translate.map(f).join(","), f(t.rotate)].join("\t"))
        return stoppedTween;
    })
})
    .each("end", function () {
    stoppedTween = true
});


function rotTween() {
    var i = d3.interpolate(0, 360);
    return function(t) {
        return "rotate(" + i(t) + ",100,100)";
    };
}

function f(x) {
    return d3.format(">8.2f")(x)
}