D3 v3 добавление checkbox?

Question

Работаю со складным деревом сверху вниз. Здесь я столкнулся с какой-то проблемой. Чтобы реализовать дерево, используя d3.v3.js. Как я могу добавить флажок в дерево для каждого узла.

// 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, но не был виден в браузере. Кто-нибудь, пожалуйста, помогите мне решить эту проблему.

Answer 1

Ваш флажок не отображается, потому что вы не можете добавить произвольные элементы html в svg. Вы должны использовать либо < г> или плавучие элементы:

#canvas { 
    position: relative; 
} 

затем добавить флажок элемент с помощью:

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

Answer 2

Вам нужно создать держатель для foreignObjects (т.е. флажок), а не входы в эта линия:

svg.selectAll("input") 

, который должен быть

svg.selectAll("foreignObject") 

вам необходимо ввести число флажков с данными как в, data(data) и связать его с enter(), как вы это сделали. Если вам нужно отобразить несколько элементов, вам нужно использовать динамическую переменную для x и y. В простом примере это будет .attr('x', function (d,i) { return d.x; }). Поэтому, ставя все вместе, вы получаете this.

Answer 3

Этот ответ является более полезным те используют Bootstrap .Чтобы добавить флажок в загрузчике, мы должны указать метки и срок 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>");