问题

以下是您要翻译的部分：

d3 js animation breathing app
d3 js 圆圈沿着圆形路径动画呼吸应用

我想要创建一个圆形沿特定时间间隔沿路径运动的动画，可以控制该时间间隔以加快/减慢速度。

我的代码目前如下。如何设置圆形沿着圆形路径移动 - 甚至让母圆形本身 "呼吸"？

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 &quot;breath&quot; in and out

27th July 2023 - current base

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js&quot;&gt;&lt;/script&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;multibar d3&lt;/title&gt;
            &lt;script src=&quot;https://d3js.org/d3.v4.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
            &lt;style&gt;
                
            &lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;



            &lt;script&gt;

            var width = 960;
            var height = 600;

            var margin = {top: 20, right: 5, bottom: 30, left: 20};

                    var svg = d3.select(&quot;body&quot;)
                    	.append(&quot;svg&quot;)
                        .attr(&quot;width&quot;, width + margin.left + margin.right)
                        .attr(&quot;height&quot;, height + margin.top + margin.bottom)
            			.append(&quot;g&quot;)
            			.attr(&#39;class&#39;, &#39;circleorbits&#39;)
            			.attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);


            var originX = 200;
            var originY = 200;
            var innerCircleRadius = 40;
            var outerCircleRadius = 60;

            /*
            var table = svg.append(&quot;circle&quot;).attr({
                cx: originX,
                cy: originY,
                r: 40,
                fill: &quot;white&quot;,
                stroke: &quot;black&quot;
            });
            */

            var group = svg.append(&quot;g&quot;);

            var outerCircle = svg.append(&quot;circle&quot;)
                .attr(&quot;cx&quot;, originX)
                .attr(&quot;cy&quot;, originY)
                .attr(&quot;opacity&quot;, 0)
                .attr(&quot;r&quot;, outerCircleRadius)
                .attr(&quot;fill&quot;, &quot;none&quot;)
                .attr(&quot;stroke&quot;, &quot;black&quot;);

    //console.log(&quot;outerCircle&quot;, outerCircle);
            var chairOriginX = originX + ((60) * Math.sin(0));
            var chairOriginY = originY - ((60) * Math.cos(0));

            var pointOnOuterCircle = svg.append(&quot;circle&quot;)
                 .attr(&quot;cx&quot;, chairOriginX)
                 .attr(&quot;cy&quot;, chairOriginY)
                 .attr(&quot;opacity&quot;, 0)
                 .attr(&quot;r&quot;, 5)
                 .attr(&quot;fill&quot;, &quot;black&quot;);
    //console.log(&quot;pointOnOuterCircle&quot;, pointOnOuterCircle);
            /*
            var chairWidth = 20;
            var chair = svg.append(&quot;rect&quot;).attr({
                x: chairOriginX - (chairWidth / 2),
                y: chairOriginY - (chairWidth / 2),
                width: chairWidth,
                opacity: 0,
                height: 20,
                fill: &quot;none&quot;,
                stroke: &quot;blue&quot;
            });
            */

            // ANIMATIONS


            // drawing outer circle
            outerCircle.transition().delay(500).duration(500).style(&quot;opacity&quot;, 1);

            // drawing point on outer circle
            pointOnOuterCircle.transition().delay(1000).duration(500).style(&quot;opacity&quot;, 1);

            // drawing chair on the point
            //chair.transition().delay(1500).duration(500).style(&quot;opacity&quot;, 1);

            // rotating the chair
            var tween = function (d, i, a) {
                return d3.interpolateString(&quot;rotate(0, 200, 200)&quot;, &quot;rotate(360, 200, 200)&quot;);
            }


            var duration = 5000;

            //chair.transition().delay(2000).duration(500).attrTween(&quot;transform&quot;, tween);
            pointOnOuterCircle.transition().delay(2000).duration(duration).attrTween(&quot;transform&quot;, tween);

            // fading out the intermediate objects
            //pointOnOuterCircle.transition().delay(4000).duration(500).style(&quot;opacity&quot;, 0);
            //outerCircle.transition().delay(4000).duration(500).style(&quot;opacity&quot;, 0);

            function newLoop(){
                pointOnOuterCircle.transition().delay(2000).duration(5000).attrTween(&quot;transform&quot;, tween);
            }

            setInterval(newLoop, duration);



            &lt;/script&gt;



        &lt;/body&gt;
    &lt;/html&gt;

&lt;!-- end snippet --&gt;

-----

    svg = d3.create(&quot;svg&quot;);
    
    var circle = svg
        .append(&quot;circle&quot;)
        .attr(&quot;cx&quot;, 150)
        .attr(&quot;cy&quot;, 75)
        .attr(&quot;r&quot;, 50);
    
   
    
    circle
        .transition()
        .duration(2000)
        .attr(&#39;r&#39;, 75);
    
    d3
        .select(&quot;#container&quot;)
        .append(() =&gt; svg.node());



    var circle = svg
        .append(&quot;circle&quot;)
        .attr(&quot;cx&quot;, 150)
        .attr(&quot;cy&quot;, 75)
        .attr(&quot;r&quot;, 50);


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;


    &lt;!DOCTYPE html&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;body&gt;
    &lt;style&gt;

    path {
      fill: none;
      stroke: #000;
      stroke-width: 3px;
    }

    circle {
      fill: steelblue;
      stroke: #fff;
      stroke-width: 3px;
    }

    &lt;/style&gt;
    &lt;script src=&quot;http://d3js.org/d3.v3.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;

    var points = [
      [480, 200],
      [580, 400],
      [680, 100],
      [780, 300],
      [180, 300],
      [280, 100],
      [380, 400]
    ];

    var svg = d3.select(&quot;body&quot;).append(&quot;svg&quot;)
        .attr(&quot;width&quot;, 960)
        .attr(&quot;height&quot;, 500);

    var path = svg.append(&quot;path&quot;)
        .data([points])
        .attr(&quot;d&quot;, d3.svg.line()
        .tension(0) // Catmull–Rom
        .interpolate(&quot;cardinal-closed&quot;));

    svg.selectAll(&quot;.point&quot;)
        .data(points)
      .enter().append(&quot;circle&quot;)
        .attr(&quot;r&quot;, 4)
        .attr(&quot;transform&quot;, function(d) { return &quot;translate(&quot; + d + &quot;)&quot;; });

    var circle = svg.append(&quot;circle&quot;)
        .attr(&quot;r&quot;, 13)
        .attr(&quot;transform&quot;, &quot;translate(&quot; + points[0] + &quot;)&quot;);

    transition();

    function transition() {
      circle.transition()
          .duration(10000)
          .attrTween(&quot;transform&quot;, translateAlong(path.node()))
          .each(&quot;end&quot;, 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 &quot;translate(&quot; + p.x + &quot;,&quot; + p.y + &quot;)&quot;;
        };
      };
    }

    &lt;/script&gt;

&lt;!-- end snippet --&gt;





</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.

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js&quot;&gt;&lt;/script&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;multibar d3&lt;/title&gt;
&lt;script src=&quot;https://d3js.org/d3.v4.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
&lt;style&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
var width = 960;
var height = 600;
var margin = {top: 20, right: 5, bottom: 30, left: 20};
var svg = d3.select(&quot;body&quot;)
.append(&quot;svg&quot;)
.attr(&quot;width&quot;, width + margin.left + margin.right)
.attr(&quot;height&quot;, height + margin.top + margin.bottom)
.append(&quot;g&quot;)
.attr(&#39;class&#39;, &#39;circleorbits&#39;)
.attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
var originX = 200;
var originY = 200;
var innerCircleRadius = 40;
var outerCircleRadius = 60;
/*
var table = svg.append(&quot;circle&quot;).attr({
cx: originX,
cy: originY,
r: 40,
fill: &quot;white&quot;,
stroke: &quot;black&quot;
});
*/
var group = svg.append(&quot;g&quot;);
var outerCircle = svg.append(&quot;circle&quot;)
.attr(&quot;cx&quot;, originX)
.attr(&quot;cy&quot;, originY)
.attr(&quot;opacity&quot;, 0)
.attr(&quot;r&quot;, outerCircleRadius)
.attr(&quot;fill&quot;, &quot;none&quot;)
.attr(&quot;stroke&quot;, &quot;black&quot;);
//console.log(&quot;outerCircle&quot;, outerCircle);
var chairOriginX = originX + ((60) * Math.sin(0));
var chairOriginY = originY - ((60) * Math.cos(0));
var pointOnOuterCircle = svg.append(&quot;circle&quot;)
.attr(&quot;cx&quot;, chairOriginX)
.attr(&quot;cy&quot;, chairOriginY)
.attr(&quot;opacity&quot;, 0)
.attr(&quot;r&quot;, 5)
.attr(&quot;fill&quot;, &quot;black&quot;);
//console.log(&quot;pointOnOuterCircle&quot;, pointOnOuterCircle);
/*
var chairWidth = 20;
var chair = svg.append(&quot;rect&quot;).attr({
x: chairOriginX - (chairWidth / 2),
y: chairOriginY - (chairWidth / 2),
width: chairWidth,
opacity: 0,
height: 20,
fill: &quot;none&quot;,
stroke: &quot;blue&quot;
});
*/
// ANIMATIONS
// drawing outer circle
outerCircle.transition().delay(500).duration(500).style(&quot;opacity&quot;, 1);
// drawing point on outer circle
pointOnOuterCircle.transition().delay(1000).duration(500).style(&quot;opacity&quot;, 1);
// drawing chair on the point
//chair.transition().delay(1500).duration(500).style(&quot;opacity&quot;, 1);
// rotating the chair
var tween = function (d, i, a) {
return d3.interpolateString(&quot;rotate(0, 200, 200)&quot;, &quot;rotate(360, 200, 200)&quot;);
}
var duration = 5000;
//chair.transition().delay(2000).duration(500).attrTween(&quot;transform&quot;, tween);
pointOnOuterCircle.transition().delay(2000).duration(duration).attrTween(&quot;transform&quot;, tween);
// fading out the intermediate objects
//pointOnOuterCircle.transition().delay(4000).duration(500).style(&quot;opacity&quot;, 0);
//outerCircle.transition().delay(4000).duration(500).style(&quot;opacity&quot;, 0);
function newLoop(){
pointOnOuterCircle.transition().delay(2000).duration(5000).attrTween(&quot;transform&quot;, tween);
}
setInterval(newLoop, duration);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

d3 js 圆圈沿着圆形路径动画呼吸应用

问题

JavaScript按元素逐个字符获取样式。

React表单在错误的时间提交。

如何在由JavaScript操作的进度条末尾添加SVG。

获取文档 DOM 对象从标签对象

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论