Question

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

返回的JSON是正确的。但是图表中显示的内容并不反映JSON中保存的数据。我感觉图表正在保留以前的图表数据。

这是一个快速的GIF，应该有助于可视化问题。 enter image description here

这是一个 JSFiddle ，可让您了解如何绘制当前的图表。而Javascript本身就是这个问题的底部。

更详细一点。单击某个节点时，它会将与该节点关联的单词传递给URL的查询字符串。然后我使用这个新的＆＃39;点击＆＃39;运行d3.json。 url并运行更新功能以重新创建图形。

这是一个错误的例子。因此，如果您进入JSFiddle并单击名为“穿孔”的节点。你会发现下一个加载的图形甚至没有“刺穿”这个词。在其中，仍然有与苦味相关的标签（原始搜索）。然而，如果你将JS顶部的变量改为“穿孔”，那就更好了。加载了一个不同但正确的图形。

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

非常感谢任何帮助。

$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];
        }
    }
}

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

enter image description here

Answer 1

手机很难掌握，但我认为原因可能是因为它对新数据感到困惑。默认情况下，data()函数使用项目的索引加入DOM。

您需要做的是将另一个函数传递给data()的调用，这被称为关键函数。在这里你可以回复这个词。

.data(nodes, function(d) { return d.word; })

查看API文档https://github.com/mbostock/d3/wiki/Selections中的数据函数。我曾经遇到过一些复杂的案例，在我错过关键功能的情况下几次抓到我。

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

1 个答案: