Как отображать и скрывать ссылки и узлы при нажатии на узел в D3 Javascript

Вы можете разбить шаги, необходимые для включения/отключения видимости соседей/ребер узла, щелкнув этот узел следующим образом:

1. Вам нужно классифицировать ссылки на основе имен источников/целей и давать идентификаторы узлов на основе их имен. Это делает определение того, какие узлы/ссылки переключать, тривиальным.
2. Вам нужно сохранить, является ли каждый узел в настоящее время «активным», что вы можете использовать, чтобы определить, следует ли вам скрывать/показывать соседей узла.
3. Вам нужно добавить on("click", function(){ ... }) к каждому узлу.

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

// Set up dictionary of neighbors
var node2neighbors = {};
for (var i =0; i < json.nodes.length; i++){
    var name = json.nodes[i].name;
    node2neighbors[name] = json.links.filter(function(d){
            return d.source.name == name || d.target.name == name;
        }).map(function(d){
            return d.source.name == name ? d.target.name : d.source.name;
        });
}

Чтобы получить имена соседей узла n, я сначала фильтрую все ссылки, которые включают n, а затем извлекаю имя узла, который не является n, в каждой из этих ссылок.

Далее, вот логика, выполняемая, когда вы нажимаете на узел. Я использую массив узлов, чтобы отслеживать узлы, которые мы хотим включать/выключать (ОП сказал, что это поведение должно применяться только к синему узлу "Node1"):

var clickableNodes = ["Node1"];
nodes.filter(function(n){ return clickableNodes.indexOf(n.name) != -1; })
        // Determine if current node's neighbors and their links are visible
        var active   = n.active ? false : true // toggle whether node is active
        , newOpacity = active ? 0 : 1;

        // Extract node's name and the names of its neighbors
        var name     = n.name
        , neighbors  = node2neighbors[name];

        // Hide the neighbors and their links
        for (var i = 0; i < neighbors.length; i++){
            d3.select("circle#" + neighbors[i]).style("opacity", newOpacity);
            d3.selectAll("line." + neighbors[i]).style("opacity", newOpacity);
        }
        // Update whether or not the node is active
        n.active = active;
    });