过滤D3强制布局中的节点

时间:2017-02-05 02:47:44

标签: javascript d3.js

我有一个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";
            }
        });
    }

0 个答案:

没有答案