简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
d3 js kreisförmige animierte Atem-App, die auf einer Kreisbahn fährt
P粉191610580
P粉191610580 2023-09-14 15:46:55
0
1
506

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>

P粉191610580
P粉191610580

Antworte allen(1)
P粉864594965
P粉8645949652023-09-15 00:41:22 1 Etage

能够使用此代码创建此应用程序 - 但可能需要将其设为反应组件，以便在用户单击播放按钮时显示/隐藏它。

<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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！