时间戳

首页 > 解决方案 > 在 D3.js 中用于在斜坡上上下移动滑雪者的拖放功能

javascript - 在 D3.js 中用于在斜坡上上下移动滑雪者的拖放功能

问题描述

我想在网络上创建一个交互式教程，可以帮助学生了解滑雪的基本机制。我想教的第一件事是机械能守恒的概念。为此，我希望学生与滑雪者互动。他们应该能够在斜坡上上下移动滑雪者。当他们这样做时，应该自动计算势能的数量。当学生放下滑雪者时，滑雪者移动/移动到斜坡的末端，在那里他们可以看到滑雪者的速度（忽略施加的力，例如空气阻力和摩擦力）。

当学生将滑雪者在斜坡上向上移动时，斜坡也应该跟随滑雪者。我正在用 D3.js 编写整个代码。我目前不知道如何做到这一点，所以如果有人可以指导我，我将不胜感激。到目前为止，这是我的代码：

    <!DOCTYPE html>
<html>
  <head>
    <title>Skier!</title>
        <link rel="stylesheet" href="style.css" />
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://d3js.org/d3-path.v1.min.js"></script>
    <script src="https://d3js.org/d3-shape.v1.min.js"></script>
  </head>

  <body>

  <div>
      <input type="range" id="nAngle" name="degrees" min="0" max="90">
      <label for="degress">Angle</label>
  </div>


  </body>

  <script>

  // The values for my SVG canvas
  let w = 960,
      h = 500,
      middleW = w/2,
      middleH = h/2;

  let svg = d3.select('body')
    .append('svg')
    .attr('width', w)
    .attr('height', h)

  // Creating a Group element so I can interact with all the elements of the skier
  let skier = svg.append('g')

 // Main body of the skier
   skier.append('rect')
    .attr('x', middleW)
    .attr('y', middleH)
    .attr('width', 30)
    .attr('height', 50)
    .attr('rx', 15)
    .attr('ry', 12)
    .attr('fill', 'green')
    .style("stroke", "black")
    .style("stroke-width", 5)    // set the stroke width  // set the line colour
    .attr("transform", "rotate(14, 50, 40)");

    // Pole
    skier.append('line')
        .attr("x1", middleW - 100)
        .attr("y1", middleH + 110)
        .attr("x2", middleW - 10)
        .attr("y2", middleH + 136)
        .attr('stroke', 'black')
        .style("stroke-width", 4);

      // Skis
    skier.append('line')
        .attr("x1", middleW - 90)
        .attr("y1", middleH + 170)
        .attr("x2", middleW + 5)
        .attr("y2", middleH + 190)
        .attr('stroke', 'black')
        .style("stroke-width", 4);

    // Path generator of beanie
    let arcBeanie = d3.arc()
      .innerRadius(0)
      .outerRadius(12)
      .startAngle(0)
      .endAngle(Math.PI);

      skier.append('path')
      .attr('d', arcBeanie)
      .attr('fill', 'red')
      .attr('stroke', 'black')
      .style("stroke-width", 4)
      .attr("transform", "translate(436, 334) rotate(-90)");

      arcBeanie(); //

      // Path generator of face
      let arcFace = d3.arc()
      .innerRadius(0)
      .outerRadius(12)
      .startAngle(0)
      .endAngle(Math.PI);


     skier.append('path')
        .attr('d', arcFace)
        .attr('fill', 'white')
        .attr('stroke', 'black')
        .style("stroke-width", 4)
        .attr("transform", "translate(436, 334) rotate(90)");

        arcFace(); //

      // Legs
      let arcLegs = d3.arc()
      .innerRadius(22)
      .outerRadius(24)
      .startAngle(0)
      .endAngle(Math.PI - 1.5);


      skier.append('path')
        .attr('d', arcLegs)
        .attr('stroke', 'black')
        .style("stroke-width", 4)
        .attr("transform", "translate(415, 423) rotate(14)");

        arcLegs(); //

        // Arms
      let arcArms = d3.arc()
        .innerRadius(0.25)
        .outerRadius(1)
        .startAngle(0)
        .endAngle(Math.PI - 1.4);


        skier.append('path')
        .attr('d', arcLegs)
        .attr('stroke', 'black')
        .style("stroke-width", 4)
        .attr("transform", "translate(450, 360) rotate(170)");

        arcLegs(); //


        d3.selectAll("g")
         .transition()
         .attr('transform', 'translate(300,0) rotate(20, 300, 0)')
          .attr('height', 600)
          .style('fill', 'teal')
         .duration(5000)

         d3.select("#nAngle").on("input", function() {
               update(+this.value);
             });

             // Initial starting angle of the skier
             update(0);

             // update the element
             function update(nAngle) {

               // adjust the text on the range slider
            //   d3.select("#nAngle-value").text(nAngle);
            //   d3.select("#nAngle").property("value", nAngle);

               // rotate the skier
               svg.select("g")
                 .attr("transform", "rotate("+nAngle+")");
             }

  </script>

</html>

标签： javascripthtmld3.jssvg

解决方案

推荐阅读