Javascript 在节点单击时重新加载d3.js图形

我有一个d3图，其中有一堆基于项目的节点。当我单击其中一个节点时，图形将根据单击的节点重新加载数据

我使用如下URL结构：

当单击一个节点时，我有一个函数，它使用新的URL再次运行

d3.json（

函数），然后再次执行更新函数

我最近更改了代码，使节点字出现在节点下方。现在，我在代码行

node.exit（）.remove（）；

编辑：问题已从@Elijah的答案中修复，但无法解决我的问题

因此，当我单击一个节点时，链接会被删除，然后重新生成，但上一个图中的节点会保留下来

这是我的一些JS

$wordToSearch = "bitter";

var w = 960,
    h = 960,
    node,
    link,
    root,
    title;

var jsonURL = 'http://desolate-taiga-6759.herokuapp.com/word/' + $wordToSearch;

d3.json(jsonURL, function(json) {
    root = json.words[0]; //set root node
    root.fixed = true;
    root.x = w / 2;
    root.y = h / 2 - 80;
    update();
});

var force = d3.layout.force()
    .on("tick", tick)
    .charge(-700)
    .gravity(0.1)
    .friction(0.9)
    .linkDistance(50)
    .size([w, h]);

var svg = d3.select(".graph").append("svg")
    .attr("width", w)
    .attr("height", h);



//Update the graph
function update() {
    var nodes = flatten(root),
    links = d3.layout.tree().links(nodes);

    // Restart the force layout.
    force
        .nodes(nodes)
        .links(links)
        .start();

    // Update the links…
    link = svg.selectAll("line.link")
        .data(links, function(d) { return d.target.id; });

    // Enter any new links.
    link.enter().insert("svg:line", ".node")
        .attr("class", "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; });

    // Exit any old links.
    link.exit().remove();

    // Update the nodes…
    node = svg.selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .call(force.drag);

    node.append("circle")   
        .attr("r", 10)
        .on("click", click)
        .style("fill", "red");

    node.append("text")
        .attr("dy", 10 + 15)
        .attr("text-anchor", "middle")
        .text(function(d) { return d.word });

    svg.selectAll(".node").data(nodes).exit().remove();

}

function tick() {
    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; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}




/***********************
*** CUSTOM FUNCTIONS ***
***********************/

//Request extended JSON objects when clicking a clickable node
function click(d) {
    $wordClicked = d.word;

    var jsonURL = 'http://desolate-taiga-6759.herokuapp.com/word/' + $wordClicked;
    console.log(jsonURL);

    updateGraph(jsonURL);
}

// Returns a list of all nodes under the root.
function flatten(root) {
    var nodes = [], i = 0;

    function recurse(node) {
        if (node.children) node.size = node.children.reduce(function(p, v) { return p + recurse(v); }, 0);
        if (!node.id) node.id = ++i;
        nodes.push(node);
        return node.size;
    }

    root.size = recurse(root);
    return nodes;

}

//Update graph with new extended JSON objects
function updateGraph(newURL) {
    d3.json(newURL, function(json) {
        root = json.words[0]; //set root node
        root.fixed = true;
        root.x = w / 2;
        root.y = h / 2 - 80;

        update();
    });
}

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)  {
            return sParameterName[1];
        }
    }
} 

$wordToSearch=“bitter”；
var w=960，
h=960，
节点，
链接
根，
标题
var jsonURL='1〕http://desolate-taiga-6759.herokuapp.com/word/“+$wordToSearch；
d3.json（jsonURL，函数（json）{
root=json.words[0]；//设置根节点
root.fixed=true；
根x=w/2；
根y=h/2-80；
更新（）；
});
var-force=d3.layout.force（）
.on（“滴答”，滴答）
。收费（-700）
.重力（0.1）
.摩擦力（0.9）
.linkDistance（50）
.尺寸（[w，h]）；
var svg=d3.选择（“.graph”）.追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
//更新图表
函数更新（）{
变量节点=展平（根），
links=d3.layout.tree（）.links（节点）；
//重新启动强制布局。
力
.节点（节点）
.链接（links）
.start（）；
//更新链接…
link=svg.selectAll（“line.link”）
.data（链接，函数（d）{返回d.target.id；}）；
//输入任何新链接。
link.enter（）.insert（“svg:line”，“.node”）
.attr（“类”、“链接”）
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
//退出所有旧链接。
link.exit（）.remove（）；
//更新节点…
node=svg.selectAll（“.node”）
.数据（节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.呼叫（强制拖动）；
node.append（“圆”）
.attr（“r”，10）
.on（“单击”，单击）
.样式（“填充”、“红色”）；
node.append（“文本”）
.attr（“dy”，10+15）
.attr（“文本锚定”、“中间”）
.text（函数（d）{return d.word}）；
selectAll（“.node”）.data（nodes）.exit（）.remove（）；
}
函数tick（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
}
/***********************
***自定义函数***
***********************/
//单击可单击节点时请求扩展JSON对象
功能点击（d）{
$wordClicked=d.word；
var jsonURL='1〕http://desolate-taiga-6759.herokuapp.com/word/'+$wordClicked；
console.log（jsonURL）；
更新图（jsonURL）；
}
//返回根目录下所有节点的列表。
函数展平（根）{
var节点=[]，i=0；
函数递归（节点）{
如果（node.children）node.size=node.children.reduce（函数（p，v）{return p+recurse（v）；}，0）；
如果（！node.id）node.id=++i；
nodes.push（节点）；
返回node.size；
}
root.size=递归（根）；
返回节点；
}
//使用新的扩展JSON对象更新图形
函数updateGraph（newURL）{
d3.json（newURL，函数（json）{
root=json.words[0]；//设置根节点
root.fixed=true；
根x=w/2；
根y=h/2-80；
更新（）；
});
}
函数getUrlParameter（sParam）
{
var sPageURL=window.location.search.substring（1）；
var sURLVariables=sPageURL.split（'&'）；
对于（变量i=0；i

有人知道为什么这样不行吗

---

编辑：根据@Elijah的答案更新了我的JS。

你的问题是：

node=svg.selectAll（“.node”）
.数据（节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.call（强制拖动）；

您将

节点定义为
svg.selectAll（“.node”）.enter（）
，这意味着您的变量现在引用的是选择输入行为，而不是选择本身。因此，当您尝试使用以下命令更改其退出行为时：
node.exit（）.remove（）；

…您试图访问的不是所选内容的
.exit（）
行为，而是所选内容的
.enter（）
行为。请将其替换为：

svg.selectAll（“.node”）.data（nodes）.exit（）.remove（）；

这应该可以解决你的问题。可能还有其他事情发生，但这肯定会引起问题

编辑以添加：

您还应该更新勾号函数，使其不引用现在分配给
#选择的
节点。输入（）
，而不是选择，而是引用选择：
svg.selectAll（“g.node”）
.attr（“transform”，函数（d）{return“translate”（+d.x+），“+d.y+”）；}）
处理3种状态的进入、退出和更新，彼此分开：

node = svg.selectAll(".node")
    .data(nodes);  // base data selection, this is the update

var nodeE = node
    .enter();  // handle the enter case

var nodeG = nodeE.append("g")
    .attr("class", "node")
    .call(force.drag);  // add group ON ENTER

nodeG.append("circle")  
    .attr("r", 10)
    .on("click", click)
    .style("fill", "red");  // append circle to group ON ENTER

nodeG.append("text")
    .attr("dy", 10 + 15)
    .attr("text-anchor", "middle")
    .text(function(d) { return d.word }); // append text to group ON ENTER

node.exit().remove();  // handle exit

更新fiddle。
你没有错，这肯定导致了问题。但不幸的是，它没有解决我的问题。我创建了一个fiddle来演示我的问题：你的tick函数也引用了
节点
变量，因为它被分配给enter（）行为没有更新以处理新创建的节点。@OliverEvans，致elij