0

我有一个在搜索按钮上调用的函数，根据搜索应该更新图表。

   function displayGraph(path){
        const width = 800, height = 800;

        force = d3.layout.force()
                .charge(-500)
                .linkDistance(100)
                .size([width, height]);

        svg = d3.select("#graph").append("svg")
                .attr("width", "100%").attr("height", "100%")
                .attr("pointer-events", "all");

        d3.json(path, function(error, graph) {
            if (error) return;
            console.log(graph)
            

            var link = svg.selectAll(".link")
                    .data(graph.links).enter()
                    .append("line")
                    .attr("class", "link");



            var label = svg.selectAll(null)
                    .data(graph.nodes)
                    .enter()
                    .append("text")
                    .text(function (d) { return d.title; })
                    .style("text-anchor", "middle")
                    .style("fill", "black")
                    .style("font-family", "Arial")
                    .style("font-size", 12)
                    .style("font-weight","bold")
                    .call(force.drag);;
                                    


            force.nodes(graph.nodes).links(graph.links).start();

            force.on("tick", function() {
                link.attr("x1", function(d) { return d.source.x; })
                        .attr("y1", function(d) { return d.source.y; })
                        .attr("x2", function(d) { return d.target.x; })
                        .attr("y2", function(d) { return d.target.y; });

                label.attr("x", function(d){ return d.x; })
                        .attr("y", function (d) {return d.y; });

            });
            
        });

    }

现在，当我用不同的路径再次调用此函数时，之前的图表应该会更新，但之前的图表不会改变。

我尝试了 svg.remove() 但没有用 当我使用 node.exit.remove 时也出现错误

如何更新此函数调用的数据我正在使用 d3 v3

4

0 回答 0