Question

I would like to highlight the edges of a graph when the connected nodes are hovered.
I took inspiration from the Bundle example:

However the on() function is not giving the d object to the onmouse function:

d3.json("graph_file.json", function(json) {
      force
          .nodes(json.nodes)
          .links(json.links)
          .start();

      var link = svg.selectAll("line.link")
          .data(json.links)
        .enter().append("line")
          .attr("class", function(d) { return "link source-" + d.source.key + " target-" + d.target.key; })
          .style("stroke-width", function(d) { return Math.sqrt(d.value); });

      var node = svg.selectAll("circle.node")
          .data(json.nodes)
        .enter().append("circle")
          .attr("class", "node")
          .attr("r", function(d) { return d.connec; })
          .style("fill", function(d) { return color(d.group); })
          .on("mouseover", mouseover)
          .on("mouseout", mouseout)
          .call(force.drag);

…

        function mouseover(d) {
      svg.selectAll("line.link.target-" + d.key)
          .classed("target", true);


      svg.selectAll("line.link.source-" + d.key)
          .classed("source", true);
    }

any help appreciated.

Answer 1

Ultimately I was not able to reproduce your problem! The only thing that caught me at first was when I defined my mouseover and mouseout functions after setting them in .on(…) In that case they were undefined for the call and no mouse handlers were set – so the functions were simply never called.

Anyway, you can see what I tried here. The code:

var w = 400,
    h = 400;
var vis = d3.select("svg").attr("width", 800).attr("height", 800);

var nodes = [];
var links = [];

for (var i = 0; i < 30; i++) {
    var node = {
        label: "node " + i,
        value: Math.random(),
        key: i
    };
    nodes.push(node);
};

for (var i = 0; i < nodes.length; i++) {
    for (var j = 0; j < i; j++) {
        if (Math.random() > .95) links.push({
            source: nodes[i],
            target: nodes[j],
            weight: Math.random()
        });
    }
};

var force = d3.layout.force().size([w, h]).nodes(nodes).links(links);

force.start();

var link = vis.selectAll("line.link").data(links).enter().append("line").style("stroke", "#CCC").attr("class", function(d) {
    return "link source-" + d.source.key + " target-" + d.target.key;
});

var mouseover = function(d) {
    txt.text(JSON.stringify(d));
    //txt.text("line.link.target-" + d.key);
    vis.selectAll("line.link.target-" + d.key).classed("target", true).style("stroke", '#F00');

    vis.selectAll("line.link.source-" + d.key).classed("source", true).style("stroke", '#F00');
}


var mouseout = function(d) {
    vis.selectAll("line.link.target-" + d.key).classed("target", false).style("stroke", "#CCC");

    vis.selectAll("line.link.source-" + d.key).classed("source", false).style("stroke", "#CCC");
}


var node = vis.selectAll("circle.node").data(force.nodes()).enter().append("circle").attr("class", "node").attr("r", 5).style("fill", function(d) {
    return d3.rgb(55 * d.value, 255 * d.value, 155 * d.value)
}).style("stroke", "#FFF").style("stroke-width", 3).on("mouseover", mouseover).on("mouseout", mouseout).call(force.drag);

var txt = vis.append('text').attr({
    transform: 'translate(5,400)'
}).text("Node Info");


var updateLink = function() {
    this.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;
    });
}

var updateNode = function() {
    this.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}

force.on("tick", function() {
    node.call(updateNode);
    link.call(updateLink);
});​