D3 Force Directed Graph - Удаление узлов - PullRequest
Новая
       9

D3 Force Directed Graph - Удаление узлов

0 голосов
/ 20 ноября 2018

Я пытаюсь включить этот пример для добавления / удаления узлов из Force Directed Graph.Я могу добавить узлы просто отлично, и по какой-то причине я также могу удалить добавленные узлы без проблем.Однако, когда я пытаюсь удалить любой из исходных узлов, узел не удаляется с дисплея, и он также разрывает ссылки многих других узлов.Однако он и его ссылки должным образом удаляются из JSON на основе журналов.

В этом примере используется, по-видимому, тот же метод, что и я, для удаления узлов с соединением.

Здесь также, похоже, использует метод сплайсинга, хотя я не полностью слежу за остальным, что он делает с фильтрацией.

Есть также этот вопрос , который задаетчто-то похожее, хотя ответы только на добавление адреса.

Я попытался выйти / удалить после добавления, которое не работало.Я также попытался использовать .insert вместо .append.console.log во время функции update() печатает используемый JSON и показывает, что все узлы и ссылки удалены должным образом, но на дисплее это не отражено.

Соответствующий код приведен ниже.

Инициализация / обновление графика 

//Get the SVG element
var svg = d3.select("svg");

var width = 960, height = 600;
var color = d3.scaleOrdinal(d3.schemeCategory20);

var link = svg.append("g").selectAll(".link");
var node = svg.append("g").selectAll(".node");
var label = svg.append("g").selectAll(".label");

//Begin the force simulation
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function (d) { return d.id; }).distance(50).strength(0.3))
    .force("charge", d3.forceManyBody().strength(-15))
    .force("center", d3.forceCenter(width / 2, height / 2));

//Highlight variables
var highlight_color = "blue";
var tHighlight = 0.05;

var config;

var linkedByIndex = {};

//Get the data
d3.json("/../../data.json", function (data) {
    //if (!localStorage.graph)
    //{
        localStorage.graph = JSON.stringify(data);
    //}
    update();
    forms();
});

function update() {

    config = JSON.parse(localStorage.graph);
    console.log(JSON.stringify(config));
    linkedByIndex = {};
    //Create an array of source,target containing all links
    config.links.forEach(function (d) {
        linkedByIndex[d.source + "," + d.target] = true;
        linkedByIndex[d.target + "," + d.source] = true;
    });

    //Draw links
    link = link.data(config.links);
    link.exit().remove();
    link = link.enter().append("line")
            .attr("class", "link")
            .attr("stroke-width", 2)
            .attr("stroke", "#888")
            //.attr("opacity", function (d) { if (d.target.radius > 7) { return 1 }; return 0; })
            .merge(link);         


    node = node.data(config.nodes);
    node.exit().remove();
    node = node.enter().append("circle")
            .attr("class", "node")
            .attr("r", function(d) { return d.radius; })
            .attr("fill", function (d) { return color(d.id); })
            .attr("stroke", "black")
        //  .attr("pointer-events", function (d) { if (d.radius <= 7) { return "none"; } return "visibleAll"; })
        //  .attr("opacity", function (d) { if (d.radius <= 7) { return 0; } return 1; })
            .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended))
            .on("mouseover", mouseOver)
            .on("mouseout", mouseOut)
            .merge(node);

    label = label.data(config.nodes);
    label.exit().remove();
    label = label.enter().append("text")
            .attr("class", "label")
            .attr("dx", function (d) { return d.radius * 1.25; })
            .attr("dy", ".35em")
            .attr("opacity", function (d) { if (d.radius <= 7) { return 0; } return 1; })
            .attr("font-weight", "normal")
            .style("font-size", 10)
            .text(function (d) { return d.id; })
            .merge(label);

    //Add nodes to simulation
    simulation
        .nodes(config.nodes)
        .on("tick", ticked);

    //Add links to simulation
    simulation.force("link")
        .links(config.links);

    simulation.alphaTarget(0.3).restart();
}

//Animating by ticks function
function ticked() {
    node
        .attr("cx", function (d) { return d.x = Math.max(d.radius, Math.min(width - d.radius, d.x)); })
        .attr("cy", function (d) { return d.y = Math.max(d.radius, Math.min(height - d.radius, d.y)); });
    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 = Math.max(d.radius, Math.min(width - d.radius, d.x)); })
        .attr("y", function (d) { return d.y = Math.max(d.radius, Math.min(height - d.radius, d.y)); });
}

//Using above array, check if two nodes are linked
function isConnected(node1, node2) {
    return linkedByIndex[node1.id + "," + node2.id] || node1.index == node2.index;
}

Добавление / удаление узлов и ссылок.ADDING прекрасно работает как для узлов, так и для ссылок. 

function newNode(name, rad)
{
    if (name == "")
    {
        alert("Must specify name");
        return;
    }
    console.log("Adding node with name: " + name + " and radius: " + rad);
    var temp = JSON.parse(localStorage.graph);
    temp.nodes.push({ "id": name, "radius": Number(rad) });
    localStorage.graph = JSON.stringify(temp);
    update();
}

function newLink(source, target)
{
    var foundSource = false;
    var foundTarget = false;

    if (source == "" && target == "")
    {
        alert("Must specify source and target");
        return;
    }
    else if(source == "")
    {
        alert("Must specify source");
        return;
    }
    else if (target == "")
    {
        alert("Must specify target")
        return;
    }

    var temp = JSON.parse(localStorage.graph);

    for (var i=0; i < temp.nodes.length; i++)
    {
        if(temp.nodes[i]['id'] === source)
        {
            foundSource = true;
        }

        if(temp.nodes[i]['id'] === target)
        {
            foundTarget = true;
        }
    }

    if (foundSource && foundTarget) {
        temp.links.push({ "source": source, "target": target });
        localStorage.graph = JSON.stringify(temp);
        update();
    }
    else {
        alert("Invalid source or target");
        return;
    }

    return;
}

function removeLink(linkSource, linkTarget)
{

}

function removeNode(nodeName)
{
    var temp = JSON.parse(localStorage.graph);
    var found = false;

    if (nodeName == "")
    {
        alert("Must specify node name");
        return;
    }

    for(var i=0; i<temp.nodes.length; i++)
    {
        if(temp.nodes[i]['id'] === nodeName)
        {
            console.log("Removing node: " + nodeName);
            found = true;
            temp.nodes.splice(i, 1);
            temp.links = temp.links.filter(function (d) { return d.source != nodeName && d.target != nodeName; });
        }
    }

    if(!found)
    {
        alert("Node does not exist");
        return;
    }

    localStorage.graph = JSON.stringify(temp);

    update();
}

JSON Данные в формате 

{
  "nodes":[
   {
      "id": "id1",
       "radius": 5},
   {
      "id: "id2",
       "radius": 6}
],

"links":[{
"source": "id1",
"target": "id2"    
]
}

1 Ответ

0 голосов
/ 26 ноября 2018

По умолчанию d3 объединяет данные по индексу, поэтому после удаления узла он назначает данные неправильно.Решение состоит в том, чтобы передать второй аргумент функции .data.Вам необходимо заменить 

node = node.data(config.nodes);

на 

node = node.data(config.nodes, d => d.id);

Вы также можете сделать это для ссылок, но если их стили равны (то есть они отличаются только на x1, x2, y1 и y2) это не будет иметь значения.

Обновление: вы должны сделать это и для меток 

label = label.data(config.nodes, d => d.id);
...