英文:
d3 js circle traveling on a circle path animation breathing app
问题
以下是您要翻译的部分:
d3 js animation breathing app
我想要创建一个圆形沿特定时间间隔沿路径运动的动画,可以控制该时间间隔以加快/减慢速度。
我的代码目前如下。如何设置圆形沿着圆形路径移动 - 甚至让母圆形本身 "呼吸"?
27th July 2023 - current base
<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
<details>
<summary>英文:</summary>
d3 js animation breathing app
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/w28Rg.png
I want to be able to create an animation of a circle going around a path at a specific timed interval, with the ability to control that interval to speed it up/slow it down.
My code currently looks like this. How do I set the circle to go along a circle path - maybe even have the mother circle itself "breath" in and out
27th July 2023 - current base
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
-----
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);
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
</details>
# 答案1
**得分**: 0
以下是您提供的代码的翻译部分:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<html>
<head>
<title>多条形图 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"
});
*/
// 动画
// 绘制外部圆圈
outerCircle.transition().delay(500).duration(500).style("opacity", 1);
// 绘制外部圆圈上的点
pointOnOuterCircle.transition().delay(1000).duration(500).style("opacity", 1);
// 绘制椅子在点上
//chair.transition().delay(1500).duration(500).style("opacity", 1);
// 旋转椅子
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);
// 淡出中间对象
//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>
希望这对您有所帮助。如果您有任何其他翻译需求,请随时提问。
英文:
Was able to create this application - with this code - but will probably need to make it a react component to show/hide it when a person clicks on the play button.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论