score:1

Accepted answer

If you inspect your force chart you're gonna see that, for that particular link you mentioned (C2 to ID2), you have two lines. When you mouse over the link, you get only the information regarding the top line (the one that fires the mouseover).

There is a solution for this. Inside the mouseover (or mousemove, it doesn't matter), create a function that gets all the data regarding those two nodes (source and target). This is the function:

.on('mouseover', function(d) {
            var thisSource = d.source.id,
                thisTarget = d.target.id;
            var filteredLinks = d3GraphData.links.filter(function(e) {
                return (e.source.id === thisSource && e.target.id === thisTarget) 
                    || (e.source.id === thisTarget && e.target.id === thisSource);
            });

This function creates a new array, named filteredLinks, with all the data you need. For instance, if you hover over that link you mentioned, you get this as the result:

[{
    "source": {
        "id": "C2",
        "type": "Customer",
        "group": 1,
        "index": 0,
        "x": 405.82425848083665,
        "y": 335.62277280058106,
        "vy": -0.0002356554712780902,
        "vx": 0.00011724088097396833
    },
    "target": {
        "id": "ID2",
        "type": "ID_Card",
        "group": 1,
        "index": 1,
        "x": 387.34926064098437,
        "y": 307.0409186320801,
        "vy": -0.000681439057517941,
        "vx": 0.0008168234236215556
    },
    "sendtime": "2015-1-1",
    "paytime": "2015-1-1",
    "total_amt": 500,
    "depth": 2,
    "value": 1,
    "index": 0
}, {
    "source": {
        "id": "C2",
        "type": "Customer",
        "group": 1,
        "index": 0,
        "x": 405.82425848083665,
        "y": 335.62277280058106,
        "vy": -0.0002356554712780902,
        "vx": 0.00011724088097396833
    },
    "target": {
        "id": "ID2",
        "type": "ID_Card",
        "group": 1,
        "index": 1,
        "x": 387.34926064098437,
        "y": 307.0409186320801,
        "vy": -0.000681439057517941,
        "vx": 0.0008168234236215556
    },
    "sendtime": "2015-1-2",
    "paytime": "2015-1-3",
    "total_amt": 700,
    "depth": 3,
    "value": 1,
    "index": 1
}]

Now, just use that filtered array to populate your tooltip. As this is a lot of work, I'll leave that part to you...

PS: The best solution, however, is not having two overlapping lines at the first place. To deal with that, you could search for duplicates in your links array and merge them, before painting the chart.


Related Query

More Query from same tag