TypeError：尝试调用d3的data（）方法时，无法读取null的属性'data'

Question

我在力布局图的底部有一个时间滑块，我正在尝试根据我选择的时间窗口更新我的图形。我的网页显示此图表的部分也可以使用下拉选择器显示矩阵图。因此，我的图表可以根据时间滑块上选择的时间正确更新。但是，如果我尝试在矩阵图和力布局图之间切换几次然后尝试使用时间滑块我得到以下错误

  

TypeError：无法读取null

的属性“数据”

以下是在滑块

上更新时间时调用的方法

function update(checkOld, graphnodes, graphlinks) {
    // 1. Get SVG, context(scale etc)
    // 2. If redraw: Remove from SVG all - context
    path = path.data([]);
    path.exit().remove();
    circle = circle.data([]);
    circle.exit().remove();
    marker = marker.data([]);
    marker.exit().remove();
    text = text.data([]);
    text.exit().remove();
    if (checkOld == true) {
        // for (cntr = 0; cntr < graphNodes.length; cntr++) {
        // }
        graphNodes = graphnodes
        graphLinks = graphlinks
    }
    force.nodes(graphNodes).links(graphLinks).linkDistance(function(link) {
        return link.length; //link.target.size;
    }).linkStrength(function(link) {
        //if (link.className === 'red')  return 0.1;
        return link.strength;
    }).charge(function(node) {
        if (node.appId == 'com.nano.backend') {
            return -200;
        } else {
            return -1200;
        }
    }).start();
    path = path.data(force.links());
    path.exit().remove();
    circle = circle.data(force.nodes());
    circle.exit().remove();
    console.log(" ******* ****** ");
    console.log(graph.nodes);
    marker = marker //.data(["suit", "licensing", "resolved"])
        .data(graph.nodes, function(node) {
            //return "arrowhead";
            console.log(node);
            return node.id;
        });
    //  marker.exit().remove();
    text = text.data(force.nodes(), function(node) {
        return "S1" + node.id;
    });
    text.exit().remove();
    path.enter().append("svg:path") // actually line is added here
        .attr("class", function(edge) {
            return "link " + edge.type;
        }).attr("id", function(d, i) {
            return "link" + i;
        }).attr("marker-end", function(edge) {
            //return "url(#" + edge.target.id + ")"; //need to match with id passed above in "marker"
            return "url(#" + "arrowhead" + ")"; //need to match with id passed above in "marker"
        }).on('click', linkclick).on('mouseover', onlinkmouseover).on('mouseout', onlinkmouseout); //Added
    circle.enter().append("path").attr("class", "node").attr("d", d3.svg.symbol().type(function(d) {
            return "circle"; //(d.shapetype)
        }).size(function(node) {
            return node.size * node.size * 3.14;
        })).attr("opacity", 1).style("fill", function(d, i) {
            if (d.group == compType) {
                // console.log(d.appId+ ' ' +graph.apps[d.appId]);
                return color(graph.apps[d.appId]);
            } else {
                "";
            }
        }).attr("r", function(node) {
            if (node.compId == "*") {
                return 1;
            }
            return node.size;
        }).on("click", onnodeclick).on("dblclick", dblclick).on('mouseover', onnodemouseover)
        //.on('mouseover', tip.show) //Added
        .on('mouseout', onnodemouseout) //Added
        .on("mousedown", function(event) {
            if (event.which == 3) {
                alert("right clicked!");
            }
        }).call(drag);
    marker.enter().append("svg:marker").attr("id", function(node) {
            //called for each data node added in above line before enter
            //return "M"+node.id;
            return "arrowhead";
        }).attr("viewBox", "0 -5 10 10")
        //.attr("refX", 16.5)
        .attr("refX", function(d) {
            return markerw;
        }).attr("refY", function(d) {
            return 0; //d.size +9;
        }).attr("markerWidth", markerw).attr("markerHeight", 3).attr("orient", "auto").append("path").attr("d", "M0,-5L10,0L0,5"); //define shape of marker (arrow here) http://bl.ocks.org/dustinlarimer/5888271
    text.enter().append("svg:g");
    svg.selectAll(".link-group").append("text").attr("dy", "-0.5em").append("textPath").attr("startOffset", function(d, i) {
        return 8 / 20;
    }).attr("xlink:href", function(d, i) {
        return "#link" + i;
    }).text(function(d, i) {
        return "";
    });
    // A copy of the text with a thick white stroke for legibility.
    text.append("svg:text").attr("x", 8).attr("y", ".31em").attr("class", "shadow").attr("id", function(node) {
        return "S1" + node.id;
    }).text(function(nd) {
        if (nd.group == instanceType) {
            return "";
        }
        return nd.name;
    });
    text.append("svg:text").attr("x", 8).attr("y", ".31em").text(function(nd) {
        if (nd.group == instanceType) {
            return "";
        }
        return nd.name;
    });
    `enter code here`
}

我尝试调试此问题，并将问题集中在更新方法

中的以下代码中

marker = marker //.data(["suit", "licensing", "resolved"])
    .data(graph.nodes, function(node) {
        //return "arrowhead";
        console.log(node);
        return node.id;
    });

感谢您花时间阅读我痛苦的长篇问题，我对d3相对较新，并希望得到任何可能的帮助。