[英]Group joining data in D3 v4
我切换到D3的第4版,并且在新的进入,更新,退出模型上遇到问题。 我完全不了解它,也不知道在创建嵌套的dom元素时如何使用它。 有人可以告诉我如何调整我的代码。
var c2 = d3.select("#formdfield-node").selectAll(".ND-searchresults")
.data([0]);
c2.enter()
.append("div")
.attr("class", "ND-searchresults");
c2.exit().remove();
var c3 = c2.selectAll(".ND-searchresults-list")
.data(function(d) {
return [d]
});
c3.enter()
.append("ul")
.attr("class", "ND-searchresults-list");
c3.exit().remove();
var bsl = c3.selectAll(".ND-selection-rows")
.data(vmh.filter(function(d) {
return (d.logicalName.toLowerCase().match(re) || d.networkName.toLowerCase().match(re));
}));
bsl.enter()
.append("li")
.attr("class", "ND-selection-rows")
.attr("id", "ND-selection-rows")
.on("mouseup", function(d) {
d3.select("#info-sw-node").property("value", d.logicalName + " - " + d.networkName);
_thisNode = d;
d3.select(".ND-searchresults").remove();
});
bsl.exit().remove();
var bsrows = bsl.selectAll(".ND-rows-name")
.data(function(d) {
return [d];
});
bsrows.text(function(d) {
return d.logicalName + " - " + d.networkName
});
bsrows.enter()
.append("div")
.attr("class", "ND-rows-name")
.text(function(d) {
return d.logicalName + " - " + d.networkName
});
bsrows.exit().remove();
确定现在通过使用合并修复了我的问题
d3.select(".searchbar")
.on("input", function(d) {
if (!this.value == ""){
var vvalue = this.value.toString().toLowerCase();
var re = new RegExp(vvalue);
var a = d3.select(".search").selectAll(".BS-searchresults").data([BS]);
var a_enter = a.enter()
.append("div")
.attr("class","BS-searchresults");
var a_update = a.merge(a_enter);
a.exit().remove();
var b = a_update.selectAll(".BS-searchresults-list").data(function (d) {return [d]});
var b_enter = b.enter()
.append("ul")
.attr("class","BS-searchresults-list");
var b_update = b.merge(b_enter);
b.exit().remove();
var c = b_update.selectAll(".BS-selection-rows").data(function (d) {return d.filter(function(d) { return (d.logicalName.toLowerCase().match(re) || d.networkName.toLowerCase().match(re))})});
var c_enter = c.enter()
.append("li")
.attr("class", "BS-selection-rows")
.attr("id", "BS-selection-rows");
var c_update = c.merge(c_enter)
.attr("title", function(d) {return d.networkName});
c.exit().remove();
var d = c_update.selectAll(".BS-rows-name").data(function (d) {return [d]});
var d_enter = d.enter()
.append("div")
.attr("class", "BS-rows-name");
var d_update = d.merge(d_enter)
.text(function(d) {return d.logicalName+" - "+d.networkName})
.on("mouseup", function(d){
d3.select(".searchbar").property("value", d.logicalName+" - "+d.networkName);
d3.select(".BS-searchresults").remove();
loadBS(d);
});;
d.exit().remove();
//Außerhalb klicken um die Liste auszublenden
$(window).click(function() {
d3.select(".BS-searchresults").remove();
});
$('#BS-selection-rows').click(function(event){
event.stopPropagation();
});
$('#bs-search').click(function(event){
event.stopPropagation();
});
}else{
d3.select(".BS-searchresults").remove();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.