[英]D3 v3 appending checkbox?
我正在与可折叠树的顶部到底部的Orientatin一起工作。 在这里我遇到了一些问题。 要实现该树,请使用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中的复选框,但在浏览器中不可见。 有人请帮我解决这个问题
您需要为foreignObjects(即复选框)创建一个持有人,而不是此行中的输入:
svg.selectAll("input")
应该是
svg.selectAll("foreignObject")
然后,您需要像在data(data)
那样使用数据来驱动复选框的数量,并按照完成的操作将其与enter()
绑定。 如果要显示多个元素,则需要对x和y使用动态变量。 在一个简单的示例中,它将是.attr('x', function (d,i) { return dx; })
。 因此,将所有内容放在一起摆弄就可以了 。
您的复选框未出现,因为您无法将任意html元素附加到svg。 您应该使用<g>或浮动元素:
#canvas {
position: relative;
}
然后使用以下方法添加复选框元素:
d3.select("#canvas")
.append("input")
.attr("type", "checkbox")
.style("position", "absolute")
.style("top", "320")
.style("left", "150")
这个答案在使用Bootstrap的情况下更有用。要在bootstrap中添加复选框,我们需要在添加异物时指定label和span 。 否则在浏览器中不可见
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>");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.