我有一个D3力布局,我想根据一个复选框过滤图形。我有这样的数据结构:
"nodes": [{
"ID": [
"randomID1"
],
"authors": [
"data1",
"data6",
"data5"
],
"type2": "randomType",
"name": "someName1"
},
{
"ID": [
"randomID2"
],
"type1": [
"data1",
"data2",
"data3",
"data4"
],
"type2": "randomType",
"name": "some name 2"
}]
我试图实现我在网上找到的这两个函数,以便部分地比较数组中的字符串,但是它会引发错误o.includes不是函数
function createFilter() {
//alert("createFilter");
d3.select(".filterContainer").selectAll("div")
.data(["data1", "data2", "data3", "data4", "data5", "data6"])
.enter()
.append("div")
.attr("class", "checkbox-container")
.append("label")
.each(function (d) {
// create checkbox for each data
d3.select(this).append("input")
.attr("type", "checkbox")
.attr("id", function (d) {
return "chk_" + d;
})
.attr("checked", true)
.on("click", function (d, i) {
// register on click event
var lVisibility = this.checked ? "visible" : "hidden";
filterGraph(d, lVisibility);
})
d3.select(this).append("span")
.text(function (d) {
return d;
});
});
$("#sidebar").show();
}
function filterGraph(aType, aVisibility) {
// change the visibility of the connection link
link.style("visibility", function (o) {
var lOriginalVisibility = $(this).css("visibility");
return o.includes(aType) ? aVisibility : lOriginalVisibility;
});
// change the visibility of the node
// if all the links with that node are invisible, the node should also be invisible
// otherwise if any link related to that node is visible, the node should be visible
circle.style("visibility", function (o, i) {
var lHideNode = true;
link.each(function (d, i) {
if (d.source === o || d.target === o) {
if ($(this).css("visibility") === "visible") {
lHideNode = false;
// we need show the text for this circle
d3.select(d3.selectAll(".nodeText")[0][i]).style("visibility", "visible");
return "visible";
}
}
});
if (lHideNode) {
// we need hide the text for this circle
d3.select(d3.selectAll(".nodeText")[0][i]).style("visibility", "hidden");
return "hidden";
}
});
}