d3 js kreisförmige animierte Atem-App, die auf einer Kreisbahn fährt
d3 js animierte Atemanwendung
Ich möchte in der Lage sein, eine Animation eines Kreises zu erstellen, der sich in einem bestimmten Zeitintervall um einen Pfad dreht, und dieses Intervall so zu steuern, dass es schneller/langsamer wird.
Mein Code sieht derzeit so aus. Wie man einen Kreis so einstellt, dass er sich entlang einer Kreisbahn bewegt – und sogar den übergeordneten Kreis selbst ein- und ausatmen lässt
27. Juli 2023 – Aktuelle Basis
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<html>
<head>
<title>multibar d3</title>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<script>
var width = 960;
var height = 600;
var margin = {top: 20, right: 5, bottom: 30, left: 20};
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr('class', 'circleorbits')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var originX = 200;
var originY = 200;
var innerCircleRadius = 40;
var outerCircleRadius = 60;
/*
var table = svg.append("circle").attr({
cx: originX,
cy: originY,
r: 40,
fill: "white",
stroke: "black"
});
*/
var group = svg.append("g");
var outerCircle = svg.append("circle")
.attr("cx", originX)
.attr("cy", originY)
.attr("opacity", 0)
.attr("r", outerCircleRadius)
.attr("fill", "none")
.attr("stroke", "black");
//console.log("outerCircle", outerCircle);
var chairOriginX = originX + ((60) * Math.sin(0));
var chairOriginY = originY - ((60) * Math.cos(0));
var pointOnOuterCircle = svg.append("circle")
.attr("cx", chairOriginX)
.attr("cy", chairOriginY)
.attr("opacity", 0)
.attr("r", 5)
.attr("fill", "black");
//console.log("pointOnOuterCircle", pointOnOuterCircle);
/*
var chairWidth = 20;
var chair = svg.append("rect").attr({
x: chairOriginX - (chairWidth / 2),
y: chairOriginY - (chairWidth / 2),
width: chairWidth,
opacity: 0,
height: 20,
fill: "none",
stroke: "blue"
});
*/
// ANIMATIONS
// drawing outer circle
outerCircle.transition().delay(500).duration(500).style("opacity", 1);
// drawing point on outer circle
pointOnOuterCircle.transition().delay(1000).duration(500).style("opacity", 1);
// drawing chair on the point
//chair.transition().delay(1500).duration(500).style("opacity", 1);
// rotating the chair
var tween = function (d, i, a) {
return d3.interpolateString("rotate(0, 200, 200)", "rotate(360, 200, 200)");
}
var duration = 5000;
//chair.transition().delay(2000).duration(500).attrTween("transform", tween);
pointOnOuterCircle.transition().delay(2000).duration(duration).attrTween("transform", tween);
// fading out the intermediate objects
//pointOnOuterCircle.transition().delay(4000).duration(500).style("opacity", 0);
//outerCircle.transition().delay(4000).duration(500).style("opacity", 0);
function newLoop(){
pointOnOuterCircle.transition().delay(2000).duration(5000).attrTween("transform", tween);
}
setInterval(newLoop, duration);
</script>
</body>
</html>
svg = d3.create("svg");
var circle = svg
.append("circle")
.attr("cx", 150)
.attr("cy", 75)
.attr("r", 50);
circle
.transition()
.duration(2000)
.attr('r', 75);
d3
.select("#container")
.append(() => svg.node());
var circle = svg
.append("circle")
.attr("cx", 150)
.attr("cy", 75)
.attr("r", 50);
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
path {
fill: none;
stroke: #000;
stroke-width: 3px;
}
circle {
fill: steelblue;
stroke: #fff;
stroke-width: 3px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var points = [
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var path = svg.append("path")
.data([points])
.attr("d", d3.svg.line()
.tension(0) // Catmull–Rom
.interpolate("cardinal-closed"));
svg.selectAll(".point")
.data(points)
.enter().append("circle")
.attr("r", 4)
.attr("transform", function(d) { return "translate(" + d + ")"; });
var circle = svg.append("circle")
.attr("r", 13)
.attr("transform", "translate(" + points[0] + ")");
transition();
function transition() {
circle.transition()
.duration(10000)
.attrTween("transform", translateAlong(path.node()))
.each("end", transition);
}
// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
var l = path.getTotalLength();
return function(d, i, a) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
</script>
