d3 js 在圓形路徑上行駛的圓形動畫呼吸應用程式
d3 js 動畫呼吸應用
我希望能夠創建一個以特定時間間隔圍繞路徑旋轉的圓圈動畫，並能夠控制該間隔以加快/減慢速度。
我的程式碼目前看起來像這樣。如何設置圓圈沿著圓圈路徑移動 - 甚至可以讓母圓圈本身「呼吸」進出
2023 年 7 月 27 日 - 目前基地
<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>
