Question

我想尝试一下Bostock Epicyclic Gears的一个简单变体。

似乎运行齿轮的特定代码与html用户表单一起使用。确切的代码在这里：

d3.selectAll("input[name=reference]")
  .data([radius * 5, Infinity, -radius])
    .on("change", function(radius1) {
      var radius0 = frame.datum().radius, angle = (Date.now() - start) * speed;
      frame.datum({radius: radius1});
      svg.attr("transform", "rotate(" + (offset += angle / radius0 - angle / radius1) + ")");
    });

我尝试的是取.on("change"函数中的所有内容并将其从闭包中删除。我的想法是，即使在没有单选按钮的情况下，所有需要的变量也将始终在范围内。但是我得到了d3错误：＆＃34;无法读取数据的属性 null＆＃34;来自d3.js库线761.所以这基本上就是我被困住的地方。

所以重申一下，为了制作这些齿轮的简单变体，我想删除表格所包裹的所有html单选按钮，并且只需在页面加载时旋转齿轮。有人可以告诉我在这里应该做些什么吗？

谢谢

Answer 1

示例代码实际上格式错误，并且缺少正文标记。我认为它有效，因为当浏览器解析<form>标记时，它会自动将其包装在<body>中。因此，当您取出表格时，请添加一个正文。

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 960px;
    height: 500px;
    position: relative;
  }
  
  form {
    position: absolute;
    top: 1em;
    left: 1em;
  }
  
  path {
    fill-rule: evenodd;
    stroke: #333;
    stroke-width: 2px;
  }
  
  .sun path {
    fill: #6baed6;
  }
  
  .planet path {
    fill: #9ecae1;
  }
  
  .annulus path {
    fill: #c6dbef;
  }
</style>

<script src="https://d3js.org/d3.v4.js"></script>

<body>

  <script>
    var width = 960,
      height = 500,
      radius = 80,
      x = Math.sin(2 * Math.PI / 3),
      y = Math.cos(2 * Math.PI / 3);

    var offset = 0,
      speed = 4,
      start = Date.now();

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(.55)")
      .append("g");

    var frame = svg.append("g")
      .datum({
        radius: Infinity
      });

    frame.append("g")
      .attr("class", "annulus")
      .datum({
        teeth: 80,
        radius: -radius * 5,
        annulus: true
      })
      .append("path")
      .attr("d", gear);

    frame.append("g")
      .attr("class", "sun")
      .datum({
        teeth: 16,
        radius: radius
      })
      .append("path")
      .attr("d", gear);

    frame.append("g")
      .attr("class", "planet")
      .attr("transform", "translate(0,-" + radius * 3 + ")")
      .datum({
        teeth: 32,
        radius: -radius * 2
      })
      .append("path")
      .attr("d", gear);

    frame.append("g")
      .attr("class", "planet")
      .attr("transform", "translate(" + -radius * 3 * x + "," + -radius * 3 * y + ")")
      .datum({
        teeth: 32,
        radius: -radius * 2
      })
      .append("path")
      .attr("d", gear);

    frame.append("g")
      .attr("class", "planet")
      .attr("transform", "translate(" + radius * 3 * x + "," + -radius * 3 * y + ")")
      .datum({
        teeth: 32,
        radius: -radius * 2
      })
      .append("path")
      .attr("d", gear);

    // all 3 options
    var radius1 = radius * 5;
    var radius1 = Infinity;
    var radius1 = -radius;
    var radius0 = frame.datum().radius,
      angle = (Date.now() - start) * speed;
    frame.datum({
      radius: radius1
    });
    svg.attr("transform", "rotate(" + (offset += angle / radius0 - angle / radius1) + ")");


    function gear(d) {
      var n = d.teeth,
        r2 = Math.abs(d.radius),
        r0 = r2 - 8,
        r1 = r2 + 8,
        r3 = d.annulus ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20,
        da = Math.PI / n,
        a0 = -Math.PI / 2 + (d.annulus ? Math.PI / n : 0),
        i = -1,
        path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
      while (++i < n) path.push(
        "A", r0, ",", r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",", r0 * Math.sin(a0),
        "L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0),
        "L", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
        "A", r1, ",", r1, " 0 0,1 ", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
        "L", r2 * Math.cos(a0 += da / 3), ",", r2 * Math.sin(a0),
        "L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0));
      path.push("M0,", -r3, "A", r3, ",", r3, " 0 0,0 0,", r3, "A", r3, ",", r3, " 0 0,0 0,", -r3, "Z");
      return path.join("");
    }

    d3.timer(function() {
      var angle = (Date.now() - start) * speed,
        transform = function(d) {
          return "rotate(" + angle / d.radius + ")";
        };
      frame.selectAll("path").attr("transform", transform);
      frame.attr("transform", transform); // frame of reference
    });
  </script>
</body>

＆＃13;

如何在不使用用户输入表单的情况下设置齿轮示例的初始状态

1 个答案: