d3.js select connected nodes on mouseover

Question

I am trying to make the text of all connected nodes' labels bold on mouseover. Trying various procedures as you can see from the comments, but still can't get it working. I am using circular graph based on http://bl.ocks.org/sjengle/5432087.

What I want is, when I hover with mouse over one node, I want all the connected nodes to get bold. (what I have now is that all connected lines get thicker, but I also want to get the nodes on the end of the lines highlighted - bold)

Here is the corresponding code:

function mouseovered(d) {
    console.log("mouseOver");
    //d3.select(this).style("font-weight", 700);
    d3.select("#plot").selectAll(".link")
        .filter(function(l) { return l.source.name === d.name || l.target.name === d.name; })
        .filter(function(l) { return l.value > 0; })
        //.filter(function(l) { return console.log(l)})
        //.style("font-weight", 700);
        .style("stroke-width", "4px")
        .style("stroke-opacity", 1);
    d3.select("#plot").selectAll(".link")
        .filter(function(l) { return l.source.name != d.name && l.target.name != d.name; })
        .filter(function(l) { return l.value > 0; })
        //.filter(function(l) { return console.log(l)})
        //.style("font-weight", 700);
        //.style("stroke-width", "4px")
        .style("stroke-opacity", 0.1);

    linkList = d3.select("#plot").selectAll(".link")
        //.filter(function(l) { return l.source.name != d.name && l.target.name != d.name; })
        //.filter(function(l) { return l.source.name === d.name || l.target.name === d.name; })
        .filter(function(l) { return if (l.source.name === d.name){return l.target.name} else if(l.target.name === d.name){return l.source.name; })
        .filter(function(l) { return console.log("L.SOURCE:", l.source.name, "L.TARGET:", l.target.name); })
        .filter(function(l) { return l.source.name, l.target.name; });
        //console.log(linkList);

    console.log("link:", linkList)

    d3.select("#plot").selectAll(".nodeText")
        //.filter(function(l) { return d3.select("#plot").selectAll(".link").filter(function(k) {return k.source.name === d.name || k.target.name === d.name ; })})
        //.filter(function(l) { return d3.select("#plot").selectAll(".link").filter(function(k) {return k.value > 0 ; })})
        .filter(function(l) { return l.name === "OP PPR_07.1 Posílení výzkumu, technologického rozvoje a inovací"})
        .filter(function(l) { return l.name === linkList})
        .style("font-weight", 700);

}

And here is the format of my data:

{"nodes": [{"name": "OP PIK_01.1 Rozvoj výzkumu a vývoje pro inovace", "group": 1}, {"name": "OP PIK_01.2 Rozvoj podnikání a konkurenceschopnosti malých a středních podniků", "group": 1}, {"name": "OP PIK_01.3 Účinné nakládání energií, rozvoj energetické infrastruktury a obnovitelných zdrojů energie, podpora zavádění nových technologií v oblasti nakládání energií a druhotných surovin", "group": 1}, {"name": "OP PIK_01.4 Rozvoj vysokorychlostních přístupových sítí k internetu a informačních a komunikačních technologií", "group": 1}, {"name": "OP PIK_01.5 Technická pomoc", "group": 1}, ...

, {"name": "", "group": 2}, {"name": "", "group": 4}, {"name": "", "group": 6}, {"name": "", "group": 8}, {"name": "", "group": 10}, {"name": "", "group": 12}, {"name": "", "group": 14}, {"name": "", "group": 16}

], "links": [{"value": 0.13757455268389662, "target": 1, "source": 0}, {"value": 0.07236842105263158, "target": 2, "source": 0}, {"value": 0.03948896631823461, "target": 3, "source": 0}, {"value": 0.0, "target": 4, "source": 0}, {"value": 0.007836990595611285, "target": 5, "source": 0}, {"value": 0.009244992295839754, "target": 6, "source": 0}, {"value": 0.0005341167044999333, "target": 7, "source": 0}, {"value": 0.0, "target": 8, "source": 0}, {"value": 0.06844336765596608, "target": 9, "source": 0}, {"value": 0.0, "target": 10, "source": 0}, {"value": 0.0014781966001478197, "target": 11, "source": 0}, {"value": 0.0, "target": 12, "source": 0}, {"value": 0.0, "target": 13, "source": 0}, {"value": 0.0, "target": 14, "source": 0}, {"value": 0.0, "target": 15, "source": 0}, {"value": 0.0, "target": 16, "source": 0}, {"value": 0.0, "target": 17, "source": 0}, {"value": 0.0, "target": 18, "source": 0}, {"value": 0.004398826979472141, "target": 19, "source": 0}, {"value": 0.0018248175182481751, "target": 20, "source": 0}, {"value": 0.0, "target": 21, "source": 0}, {"value": 0.0022197558268590455, "target": 22, "source": 0}, {"value": 0.0, "target": 23, "source": 0}, ... ]}

Answer 1

Using the original Miserable nodes and links I found the following code to work.

function mouseover(d) {
    d3.select("#plot").selectAll(".link")
        .filter(function(l) { return l.source.name === d.name || l.target.name === d.name; })
        .filter(function(l) { return l.value > 0; })
        .classed("highlight", true);
    d3.select("#plot").selectAll(".link")
        .filter(function(l) { return l.source.name != d.name && l.target.name != d.name; })
        .filter(function(l) { return l.value > 0; })
        .classed("downlight", true);
    d3.select("#plot").selectAll(".node")
        .each(function(n) {
            for (let index = 0; index < graphData.links.length; index++) {
                const element = graphData.links[index];
                if ( (element.source.name === d.name && element.target.name === n.name) ||
                     (element.target.name === d.name && element.source.name === n.name)
                   ) {
                    d3.select(this).attr("r", 8);
                    return;
                }
            }
         });
}

function mouseout(d) {
    d3.select("#plot").selectAll(".link")
        .classed("highlight downlight", false);
    d3.select("#plot").selectAll(".node")
        .attr("r", 5)
        .classed("highlight", false);
}

// Draws nodes with tooltips
function drawNodes(nodes) {
    // used to assign nodes color by group
    var color = d3.scale.category20();

    d3.select("#plot").selectAll(".node")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("class", "node")
        .attr("id", function(d, i) { return d.name; })
        .attr("cx", function(d, i) { return d.x; })
        .attr("cy", function(d, i) { return d.y; })
        .attr("r", 5)
        .style("fill",   function(d, i) { return color(d.group); })
        .on("mouseover", function(d, i) { addTooltip(d3.select(this)); mouseover(d); })
        .on("mouseout",  function(d, i) { d3.select("#tooltip").remove(); mouseout(); });
}

You need a bit of CSS too

.node {
    stroke: #ffffff;
    stroke-width: 1px;
}

.node.highlight {
    stroke: #0000;
    stroke-width: 3px;
}

.link {
    fill: none;
    stroke: #888888;
    stroke-width: 1px;
    stroke-opacity: 0.5;
}

.link.highlight {
    stroke: red;
    stroke-opacity: 1.0;
}
.downlight {
    stroke-opacity: 0.1;
}

And a save of the graph data

var graphData = null;

// Draws an arc diagram for the provided undirected graph
function drawGraph(graph) {
    graphData = graph; // save for later in mouseover

    ....
}