从d3中的节点中删除文本 [英] Remove Text from Nodes in d3

问题描述

我有一个d3的力图，每次我删除一个节点，写入（覆盖？）文本。我想解决这个问题的决议是删除在 update（）函数中的文本标签。然而，如果如果我有很多节点在屏幕上，那将是沉重的，我不确定性能明智。我也不知道为什么它甚至发生在第一位。

以下是我认为与此问题相关的代码段：

  function update（）{
 
 //刷新所选节点的列表
 selectedNodes = nodes.filter（function（d）{return d.selected;}）; 
 
 //根据edges数组更新链接数据。 
 link = link.data（edges）; 
 
 //创建新链接
 link.enter（）。append（line）
 .attr（class，link）
 .style （stroke-width，1.5）; 
 
 //删除删除的链接
 link.exit（）。remove（）; 
 
 //根据nodes数组更新节点数据。 
 node = node.data（nodes）; 
 
 //创建新节点
 node.enter（）。append（g）
 .attr（class，node）
 .attr （id，function（d）{return d.data ['id']}）
 //.attr(\"fixed，function（d）{return d.fixed = true}）
 .call（force.drag）
 .on（'mouseover'，connectedNodes）
 .on（'mouseleave'，restore）
 //.on('dblclick'，highlight）
 .on（'dblclick'，highlight）; 
 
 //删除已删除的节点
 node.exit（）。remove（）; 
 
 node.append（circle）。attr（r，11）; 
 node.classed（selected，function（d）{return d === d.selected;}）
 
 //检查节点行为从JSON。 
 node.style（fill，function（d）{
 if（d.selected === false）{
 console.log（Not Highlighting+ d.data [' id'] +selected is+ d.selected）; 
 return d.data ['color'] 
 update（）; 
} 
 else {
 console.log（Highlighting+ d.data ['id'] +selected is+ d.selected）; 
 returnyellow; 
 update（）; 
} 
}）。select（circle）。style（stroke，black）; 
 
 //根据JSON数据链接颜色。 
 link.style（stroke，function（d）{return d.data ['color']}）; 
 
 //添加文本到节点
 node.append（text）
 .attr（dx，12）
 .attr .35em）
 .style（fill，black）
 .text（function（d）{return d.data ['label'];}）; 
 
 //创建用于计算邻居节点的索引。 
 root.edges.forEach（function（d）{
 linkedByIndex [d.data.source +，+ d.data.target] = 1; 
}）; 
 
 //基于窗口的图的响应行为。 
 window.addEventListener（'resize'，resize）; 
 
 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;}）; 
 
 node.attr（transform，function（d）{returntranslate +，+ dy +）;}）; 
}）; 
 force.start（）; 
} 
 
 //使用提示删除节点
 function deleteNode（）{
 console.log（提示删除所选节点。 
 if（confirm（删除所选元素将从图中完全删除它们。\\\
Are你确定吗？（这不能撤消。）））{
 if（selectedNodes.length> ; 0）{
 for（var i = 0; i  selectedNodes [i] .removed = true; 
 nodes.splice（nodes.indexOf（selectedNodes [i]），1）; 
 spliceLinksForNode（selectedNodes [i]）; 
} 
} 
 else alert（No node（s）selected。）; 
 update（）; 
} 
} 
 
 function spliceLinksForNode（node）{
 toSplice = edges.filter（
 function（e）{
 return .source === node）||（e.target === node）;}）; 
 toSplice.map（
 function（e）{
 edges.splice（edges.indexOf（e），1）;}）; 
} 
  

下面是删除节点后的截图。 p>

解决方案

我有同样的问题，根据我的理解它组的问题。

删除元素明确地解决了问题。 Beside：

  //退出任何旧节点
 node.exit（）。remove 
  

我也呼叫：

  //删除任何旧圈子
 svg.selectAll（circle）。remove（）; 
 //删除任何旧文本
 svg.selectAll（text）。remove（）; 
 //删除任何旧的标题
 svg.selectAll（title）。remove（）; 
  

更新功能。

希望这个答案可以帮助任何人，带了我半天的时间让它工作。

I have a d3 force graph that is writing over (overwriting?) the text every time I delete a node. I think the resolution to solving this is to just remove the text labels in my update() function. However, I am not sure performance wise if that is going to be heavy if I have lots of nodes on the screen. I also am not sure why it is even happening in the first place.

Here are the pieces of my code that I think have to do with the issue:

function update() {

    // refresh list of selected nodes
    selectedNodes = nodes.filter(function(d) { return d.selected; });

    // Update link data based on edges array.
    link = link.data(edges);

    // Create new links
    link.enter().append("line")
            .attr("class", "link")
            .style("stroke-width", 1.5);

    // Delete removed links
    link.exit().remove();

    // Update node data based on nodes array.
    node = node.data(nodes);

    // Create new nodes
    node.enter().append("g")
            .attr("class", "node")
            .attr("id", function(d) { return d.data['id'] })
        //.attr("fixed", function(d) { return d.fixed=true })
            .call(force.drag)
            .on('mouseover', connectedNodes)
            .on('mouseleave', restore)
        //.on('dblclick', highlight)
            .on('dblclick', highlight);

    // Delete removed nodes
    node.exit().remove();

    node.append("circle").attr("r", 11);
    node.classed("selected", function(d) { return d === d.selected; })

    // Node behavior for checking if selected otherwise colors nodes to color given from JSON.
    node.style("fill", function(d) {
        if (d.selected === false) {
            console.log("Not Highlighting " + d.data['id'] + " selected is " + d.selected);
            return d.data['color']
            update();
        }
        else {
            console.log("Highlighting " + d.data['id'] + " selected is " + d.selected);
            return "yellow";
            update();
        }
    }).select("circle").style("stroke", "black");

    // Link color based on JSON data.
    link.style("stroke", function(d) { return d.data['color'] });

    // Adds text to nodes
    node.append("text")
            .attr("dx", 12)
            .attr("dy", ".35em")
            .style("fill", "black")
            .text(function (d) { return d.data['label']; });

    // Creates an index used to figure out neighbor nodes.
    root.edges.forEach(function (d) {
        linkedByIndex[d.data.source + "," + d.data.target] = 1;
    });

    // responsive behavior for graph based on window.
    window.addEventListener('resize', resize);

    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; });

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

// Delete node with prompt
function deleteNode() {
    console.log("Prompted to delete selected nodes.");
    if (confirm("Deleting selected element(s) will remove them from the graph entirely.\nAre you sure? (This cannot be undone).")) {
        if (selectedNodes.length > 0) {
            for (var i = 0; i < selectedNodes.length; i++) {
                selectedNodes[i].removed = true;
                nodes.splice(nodes.indexOf(selectedNodes[i]), 1);
                spliceLinksForNode(selectedNodes[i]);
            }
        }
        else alert("No node(s) selected.");
        update();
    }
}

function spliceLinksForNode(node) {
    toSplice = edges.filter(
            function(e) {
                return (e.source === node) || (e.target === node); });
    toSplice.map(
            function(e) {
                edges.splice(edges.indexOf(e), 1); });
}

Here is a screenshot from how it looks like after deleting a node.

解决方案

I had the same problem, as far as I understood it the group makes the problems.

For me removing the elements explicit fixed the problem. Beside:

// Exit any old node
node.exit().remove();

I call also:

// Remove any old circle
svg.selectAll("circle").remove();
// Remove any old text
svg.selectAll("text").remove();
// Remove any old title
svg.selectAll("title").remove();

in the update function.

I hope this answers helps anybody, took me a half day to get it work.

这篇关于从d3中的节点中删除文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！