Удалить соединение/круг в схеме сети с помощью d3.js

Question

Пожалуйста, посмотрите на мой jsFiddle он имеет следующие данные, связанные:

rules = [['L5', 'L2'], ['L5', 'L2'], ['L4', 'L2'], ['L2', 'L1'], ['L3', 'L1'], ['L1', 'C1'], ['C1', 'R2'], ['C1', 'R3'], ['R2', 'R4'], ['R3', 'R6'], ['R3', 'R7']]; 

, моя цель здесь иметь кнопку, я мог бы использовать для удалите круг на диаграмме. Например, когда я нажимаю кнопку e, я удаляю R3, R2, L5. И когда это нужно, Id должен установить новое соединение между: Если R3 удален, то R7 и R6 должны указывать на C1 , если R2 удален, тогда R5 должен подключиться к C1 Если L5, то новое соединение не должно создаваться.

Если у вас есть какие-либо советы или предложения или идеи - было бы идеально. Конечно, я всегда мог перебирать источник и удалять ненужные круги и создавать новые соединения, но я ищу более эффективный способ, чем тот, у которого также есть и кнопка отмены, которая вернет любые сделанные изменения, но одну проблему за раз.

Спасибо!

Answer 1

Это называется сетевой проекцией, и вы не должны думать об этом как об удалении узлов, а о преобразовании узлов в ребра. Это не означает, что вы ошибаетесь в задаче с точки зрения D3 - вам нужно удалить и создать новые узлы, но использование соответствующей терминологии приведет вас к другим примерам. Проецирование мультимодальной сети происходит, когда вы берете сетевые узлы одного типа (например, бумаги) и используете их как ребра для соединения узлов другого типа (например, людей), чтобы преобразовать сеть людей и документы, которые они написали, в сеть людей, подключенных к с которыми они писали документы.

Чтобы выполнить это с помощью D3, вам нужно сделать несколько вещей.

Во-первых, вам нужно иметь уникальные идентификаторы для ваших ссылок и ребер и использовать их при привязке данных. Это, как правило, необходимо какое-то время, что вы хотите сделать сложное обновление и удаление элементов с D3:

d3.selectAll(".link") 
.data(links, function (d) {return d.id}) 

d3.selectAll(".node") 
.data(nodes, function (d) {return d.id}) 

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

С, что на месте, вы можете создать простую функцию, как это, что пожары, когда вы нажимаете на узле:

function collapseNode(d,i) { 
    force.stop(); 

    removedLinks = links.filter(function (p) {return p.source == d.id || p.target == d.id}); 
    filteredLinks = links.filter(function (p) {return p.source != d.id && p.target != d.id}); 

    filteredNodes = nodes.filter(function (p) {return p.id != d.id}); 

    //create new links 
    //this will have problems with parallel edges 
    for (x in removedLinks) { 
    for (y in removedLinks) { 
     if (removedLinks[x].source != d && removedLinks[y].source != d) { 
     filteredLinks.push({source: removedLinks[x].source, target: removedLinks[y].source, 
      id: generateAnID}) 
     } 
     else if (removedLinks[x].target != d && removedLinks[y].source != d) { 
     filteredLinks.push({source: removedLinks[x].target, target: removedLinks[y].source, 
      id: generateAnID}) 
     } 
     else if (removedLinks[x].source != d && removedLinks[y].target != d) { 
     filteredLinks.push({source: removedLinks[x].source, target: removedLinks[y].target, 
      id: generateAnID}) 
     } 
     else if (removedLinks[x].target != d && removedLinks[y].target != d) { 
     filteredLinks.push({source: removedLinks[x].target, target: removedLinks[y].target, 
      id: generateAnID}) 
     } 
    } 
    } 
    d3.selectAll(".node").data(filteredNodes, function(d) {return d.id}) 
    .exit() 
    .remove(); 

    d3.selectAll(".link").data(filteredLinks, function(d) {return d.id}) 
    .exit() 
    .remove(); 

    d3.selectAll(".link").data(filteredLinks, function(d) {return d.id}) 
    .enter() 
    .append("line) 
    .attr("class", "line") 

    force.start(); 

}