Javascript 重新加载（更新）d3.js强制定向图将保留旧的JSON数据

因此，我有一个d3.js强制定向图，它显示来自JSON提要的数据。当我单击一个节点时，我根据所单击的节点请求了一个更新的JSON提要

返回的JSON是正确的。但图形中显示的内容并不反映JSON中包含的数据。我有一种感觉，该图保留了以前的图形数据

这里有一个快速的gif，应该有助于将问题可视化。

这里有一个让您了解如何绘制当前工作的图形。 Javascript本身就是这个问题的核心

再详细一点。单击节点时，它会将与该节点关联的单词传递到URL的查询字符串中。然后，我使用这个新的“单击”url运行d3.json，并运行更新函数来重新创建图形

这是一个错误的例子。因此，如果您转到JSFIDLE并单击名为“piercingly”的节点，您将发现加载的下一个图形中甚至没有“piercingly”这个词，并且仍然有与Pitter（原始搜索）相关联的标签。但是，如果您将JS顶部的变量更改为“Pierciling”，则会加载一个不同但正确的图形

节点数正确。但是完整版本（不是JSFIDLE上的版本）中的标签和其他属性不正确

任何帮助都将不胜感激

$wordToSearch = "bitter";

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

var jsonURL = 'http://desolate-taiga-6759.herokuapp.com/word/basic/' + $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);

    var nodeE = node
        .enter();

    var nodeG = nodeE.append("g")
        .attr("class", "node")
        .call(force.drag);

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

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

    node.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/basic/' + $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/basic/“+$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”）
.数据（节点）；
var nodeE=node
.enter（）；
var nodeG=nodeE.append（“g”）
.attr（“类”、“节点”）
.呼叫（强制拖动）；
nodeG.append（“圆”）
.attr（“r”，10）
.on（“单击”，单击）
.样式（“填充”、“红色”）；
nodeG.append（“文本”）
.attr（“dy”，10+15）
.attr（“文本锚定”、“中间”）
.text（函数（d）{return d.word}）；
node.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/basic/'+$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

编辑：因此，我尝试在将单词添加到文本元素时将其注销。在第一次加载时，所有单词都会被记录为get分配给它们所尊重的文本元素。但是当你点击节点时，它们不会。（请参见下面的gif）。这很奇怪，因为我在单击时调用了更新函数。因此，应该为该节点再次获取单词（理论上）。但事实并非如此

---

在手机上很难掌握，但我认为原因可能是因为它对新数据感到困惑。默认情况下，

data（）

您需要做的是将另一个函数传递给对
data（）
的调用，该调用被描述为键函数。在这里，您可能只需返回单词

.data（节点，函数（d）{return d.word；}）

看看API文档中的数据函数。有几次，我遇到了一些复杂的情况，因为我错过了一个关键功能。
所以我想你可能刚刚得到了一个扣篮。我就要走了