如何使用D3.js將兩個按鈕添加到div？

我正試圖將兩個按鈕添加到一個div，一個在另一個之下。第一個按鈕接受一個數字，第二個按鈕用於打開和關閉線條。如何使用D3.js將兩個按鈕添加到div？

只創建第二個按鈕我追加。如何在同一個div中創建兩個按鈕？

這裏是一個JSFiddle.

<!DOCTYPE html> 
<meta charset="utf-8"> 
<html> 
<script src="d3.js"></script> 
<body> 
<div id=options> 
<script> 

(function(){ 
    var form = d3.select("#options") 
     .append("form") 
     .html("Enter a number:") 

    form.append("input") 
     .attr("type", "text") 
     .attr("name", "num") 

    form.append("input") 
     .attr("type", "button") 
     .attr("value", "Add") 
     .attr("onclick", "printNum(num.value)") 

    form.html("Show/hide lines:")  
     .append("input") 
     .attr("type", "button") 
     .attr("name", "toggle") 
     .attr("value", "Toggle") 
     .attr("onclick", "togglePressed()"); 
})(); 

function printNum(num){ 
    alert("You entered " + num + "!"); 
} 

function togglePressed(){ 
    alert("You pressed the toggle button!"); 
} 
</script> 
</div> 
</body> 
</html>

來源

2015-10-26 user2829582

的問題是，你設置的形式的HTML後試圖附加的東西到窗體。換句話說，追加函數可以工作，然後你破壞所有的函數，並將它交換出去，以實現.html函數中的內容。

要麼追加之前調用此塊移動到：

form.html("Show/hide lines:") .append("input") .attr("type", "button") .attr("name", "toggle") .attr("value", "Toggle") .attr("onclick", "togglePressed()");

或交替，不要使用.html功能。

參考：「設置內部HTML內容將替換現有的子元素」 https://github.com/mbostock/d3/wiki/Selections#html

更新的jsfiddle：http://jsfiddle.net/kueuLLr4/

來源

2015-10-26 17:11:05 wesww

如何使用D3.js將兩個按鈕添加到div？

回答

相關問題