ユーザー入力フォームを使用しないでギアの初期状態を設定する方法

私はEpicyclic GearsのBostockの例の簡単な変形をしようとしています。ユーザー入力フォームを使用しないでギアの初期状態を設定する方法

ギアを実行するように見える特定のコードは、htmlユーザーフォームと連携して動作しています。正確なコードはここにある：私は.on("change"関数内ですべてのものを取っていた試み、その閉鎖からそれを削除何

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) + ")"); 
    });

。私の考えは、ラジオボタンがなくても、必要なすべての変数が常に有効範囲内にあるということでした。しかし、私はd3エラーを受け取りました： "データのプロパティを読み取ることができません" d3.jsライブラリ行761から。だからそれは基本的に私が立ち往生した。

私はこれらのギアの単純な変種を作るために、フォームでラップされたすべてのhtmlラジオボタンを削除して、最初にページの読み込み時に歯車が回転するようにしたいと思います。誰かがここでやったはずのことを私に見せてもらえますか？

ありがとう

出典

2017-09-25 Arash Howaida

例のコードは実際には不正な形式であり、bodyタグがありません。ブラウザが<form>タグを解析すると、自動的にそれを<body>にラップするので、私はそれが動作すると思います。だから、あなたがフォームを取り出したら、体を追加してください。

<!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>

出典

2017-09-25 17:31:30 Mark

なるほど、あなたにぴったりです。リアビューミラーで意味をなさない。私は小さなものにあまりにも集中していたし、体がないという眩しい事実を逃した。 –

ユーザー入力フォームを使用しないでギアの初期状態を設定する方法

答えて

関連する問題