D3 v3追加複選框？

我正在從可伸縮的樹頂部到底部使用。我在這裏遇到了一些問題。爲了實現使用d3.v3.js的樹。我如何追加複選框到每個節點的樹中。D3 v3追加複選框？

// Create the link lines. 
    svg.selectAll(".link") 
     .data(links) 
     .enter().append("path") 
     .attr("class", "link") 
     .attr("d", d3.svg.diagonal().projection(function(d) { return [o.x(d)+15, o.y(d)]; })); 

     svg.selectAll("input") 
     .data(nodes) 
     .enter().append("foreignObject") 
     .attr('x' , o.x) 
     .attr('y', o.y) 
     .attr('width', 50) 
     .attr('height', 20) 
     .append("xhtml:body") 
     .html("<form><input type=checkbox id=check></input></form>") 
    .on("click", function(d, i){ 
      console.log(svg.select("#check").node().checked) 
      }) ; 

    svg.selectAll("image") 
     .data(nodes) 
    .enter().append("image") 
     .attr('x' , o.x) 
     .attr('y', o.y) 
     .attr('width', 30) 
     .attr('height', 20) 
     .attr("xlink:href", "check.png") 
    }); 
});

複選框追加到svg但在瀏覽器中不可見。有人請幫我解決這個問題

來源

2013-10-09 Aravind Cheekkallur

你的複選框不會出現，因爲你不能追加任意html元素到svg。則應使用<克>或浮動元素：

d3.select("#canvas") 
    .append("input") 
    .attr("type", "checkbox") 
    .style("position", "absolute") 
    .style("top", "320") 
    .style("left", "150")

來源

2013-10-09 07:02:58

我正在尋找附加與圖像相關的每個點的複選框。用戶可以通過單擊複選框來選擇特定圖像。 –

需要首先建立一個保持器用於foreignObjects（即複選框的），而不是在輸入：

#canvas { 
    position: relative; 
}

然後，使用附加複選框元件這一行：

svg.selectAll("input")

這應該是

svg.selectAll("foreignObject")

然後您需要使用數據驅動複選框的數量，如data(data)，並將其與enter()綁定，就像您所做的一樣。如果你想要出現多個元素，你需要爲x和y使用動態變量。一個簡單的例子是.attr('x', function (d,i) { return d.x; })。所以把它放在一個小提琴裏，你會得到this。

來源

2013-10-09 08:59:22 user1614080

正在使用d3.v3.js是js可以用於此 –

小提琴使用3.0.4版本，我用d3站點上的版本測試過它，所以它應該沒問題！ – user1614080

謝謝你的幫助。它的工作！ –

這個答案是更加有用的那些使用引導。要追加複選框處於引導我們需要指定標籤和跨度 expectly而追加異物。否則它在瀏覽器中不可見

svg.selectAll("foreignObject") 
    .data(nodes).enter() 
    .append("foreignObject") 
    .attr('x', o.x) 
    .attr('y', o.y) 
    .attr('width', 30) 
    .attr('height', 20) 
    .append("xhtml:tree") 
    .html("<label class='inline'><input type='checkbox'><span class='lbl'> </span>    </label>");

來源

2013-10-09 11:28:10

D3 v3追加複選框？

回答

相關問題