如何在不使用用戶輸入形式的情況下設置齒輪示例的初始狀態

我正在嘗試製作一個簡單的變體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.js庫行761中得到了d3錯誤：「無法讀取數據 null」的屬性。所以這基本上是我卡住的地方。所以要重申，爲了使我的這些齒輪的簡單變體，我想要刪除所有由表單包裝的html單選按鈕，並且在頁面加載時最初旋轉齒輪。有人能告訴我我應該在這裏做什麼嗎？

謝謝

來源

2017-09-25 Arash Howaida

的示例代碼實際上是異常的，缺少身體標記。我認爲它是有效的，因爲當瀏覽器解析<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

啊哈，伴你左右。在後視鏡中有意義。我過分關注這些小東西，錯過了沒有身體的明顯事實。 –

如何在不使用用戶輸入形式的情況下設置齒輪示例的初始狀態

回答

相關問題