Js / D3.js: Steps To Highlighting Of Adjacent Links

Good day, My earlier question for this project would be: D3.js: Dynamically generate source and target based on identical json values I am new to d3.js, especially in the data ma

Solution 1:

Answering only the question about how to highlight the links (since you didn't provide the links array, here is an answer based on your previous code):

node.on("click", function(d) {
    var thisNode = d.id

    d3.selectAll(".circleNode").attr("r", 6);
    d3.select(this).attr("r", 12);

    link.attr("opacity", function(d) {
        return (d.source.id == thisNode || d.target.id == thisNode) ? 1 : 0.1
    });

});

What does this code do?

First, we get the id of the clicked node:

var thisNode = d.id

Then, we scan the links to see if the source or the target has the same id:

(d.source.id == thisNode || d.target.id == thisNode)

If that is true, we set the opacity using a ternary operator:

(condition) ? 1 : 0.1

Here is the demo, click on the nodes:

var nodes = [{
    "id": "red",
    "value": "1"
}, {
    "id": "orange",
    "value": "2"
}, {
    "id": "yellow",
    "value": "3"
}, {
    "id": "green",
    "value": "1"
}, {
    "id": "blue",
    "value": "1"
}, {
    "id": "violet",
    "value": "3"
},{
    "id": "white",
    "value": "1"
},{
    "id": "gray",
    "value": "1"
},{
    "id": "teal",
    "value": "3"
}
];

var links = [];

for (var i = 0; i < nodes.length; i++) {
    for (var j = i + 1; j < nodes.length; j++) {
        if (nodes[i].value === nodes[j].value) {
            links.push({
                source: nodes[i].id,
                target: nodes[j].id
            });
        }
    }
};

var width = 300,
    height = 300;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

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

var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links)
    .enter().append("line")
    .attr("stroke-width", 1)
    .attr("stroke", "gray")
    .attr("fill", "none");

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("r", 6)
    .attr("class", "circleNode")
    .attr("stroke", "gray")
    .attr("fill", function(d) {
        return d.id;
    });

node.on("click", function(d) {
    var thisNode = d.id

    d3.selectAll(".circleNode").attr("r", 6);
    d3.select(this).attr("r", 12);

    link.attr("opacity", function(d) {
        return (d.source.id == thisNode || d.target.id == thisNode) ? 1 : 0.1
    });

});

simulation
    .nodes(nodes)
    .on("tick", ticked);

simulation.force("link")
    .links(links);

functionticked() {
    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("cx", function(d) {
            return d.x;
        })
        .attr("cy", function(d) {
            return d.y;
        });
}

<scriptsrc="https://d3js.org/d3.v4.min.js"></script>