如何使用D3.js向div中添加两个按钮？

Question

如何使用D3.js向div中添加两个按钮？

我正在尝试向div添加两个按钮，一个在另一个按钮之下。第一个按钮接受数字，第二个按钮将用于切换行的开和关。

仅创建我添加的第二个按钮。如何在同一个div中创建两个按钮？

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

wes*_*sww 5

问题是您尝试将内容附加到表单后设置表单的html 。因此，换句话说，append函数起作用，然后销毁所有内容并将其换出为.html函数中的内容。

可以在追加调用之前将其移动到：

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

Run Code Online (Sandbox Code Playgroud)

或者，不要使用该.html功能。

参考：“设置内部HTML内容将替换任何现有的子元素” https://github.com/mbostock/d3/wiki/Selections#html

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

归档时间：	10 年，1 月前
查看次数：	4398 次
最近记录：	10 年，1 月前