添加複選框沒有得到顯示在d3.js

Question

我想添加一個複選框，但它沒有得到顯示。

var svg = d3.select("#mainchart").append("svg") 
.attr("width", width) 
.attr("height", height) 
.append("g") 
.attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

svg.append('input').attr('type','checkbox').attr("x","400").attr("y","-215"); 

這裏有什麼問題？

Answer 1

svg沒有複選框元素。到一個複選框添加到網頁，它需要附加到香草html元素（在此情況下，頁面的主體）：

d3.select("body").append('input').attr('type','checkbox') 

編輯：以控制那裏出現在該複選框中選擇另一元素代替身體：

d3.select("#checkBoxDiv").append('input').attr('type','checkbox') 

會改變這一點：這個

<div id="checkBoxDiv></div> 

：

<div id="checkBoxDiv> 
    <input type="checkbox"> 
</div> 

你也硬編碼在HTML文件的最後一行，並再後來與選中該複選框：

d3.select("#about").select('input') 

Answer 2

你不能有SVG的命名空間中的HTML標籤，而無需使用foreignObject。 Here is a simple example，如您在問題上回答的問題交叉過帳here。