Bestücken d3.js aus einem Array Tooltip

Question

JSON-Daten

var IDData = JSON.stringify([ 
    ["C2", "ID2", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 2], 
    ["C2", "ID2", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 700.0, 3], 
    ["C2", "C3", "Customer", "Customer", "2015-1-1", "2015-1-1", 500.0, 2], 
    ["C2", "C3", "Customer", "Customer", "2015-1-2", "2015-1-3", 600.0, 2], 
    ["C6", "C1", "Customer", "Customer", "2015-1-1", "2015-1-1", 500.0, 1], 
    ["C5", "ID4", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 2], 
    ["C1", "ID1", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 1], 
    ["C1", "P1", "Customer", "Phone", "2015-1-1", "2015-1-1", 500.0, 1], 
    ["C6", "P2", "Customer", "Phone", "2015-1-1", "2015-1-1", 500.0, 2], 
    ["C6", "P2", "Customer", "Phone", "2015-1-3", "2015-1-4", 800.0, 2], 

    ["C2", "C6", "Customer", "Customer", "2015-1-1", "2015-1-1", 500.0, 1], 
    ["C4", "C3", "Customer", "Customer", "2015-1-1", "2015-1-1", 500.0, 3], 
    ["C1", "C2", "Customer", "Customer", '2015-1-1', "2015-1-1", 500.0, 1], 
    ["C4", "ID3", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 3], 
    ["C3", "ID3", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 3], 
    ["C1", "C5", "Customer", "Customer", "2015-1-1", "2015-1-1", 500.0, 1] 
]); 

ich durch sie zu analysieren und sie zu zwei Funktionen übergeben, die das Diagramm helfen erstellen:

var galData = JSON.parse(IDData); 
var startnodes = []; 
var endnodes = []; 
var startnodetype = []; 
var endnodetype = []; 
var SendTime = []; 
var PayTime = []; 
var Total_Amt = []; 
var Depth = []; 
galData.map(function(e, i) { 
    startnodes.push(e[0]); 
    endnodes.push(e[1]); 
    startnodetype.push(e[2]); 
    endnodetype.push(e[3]); 
    SendTime.push(e[4]); 
    PayTime.push(e[5]); 
    Total_Amt.push(e[6]); 
    Depth.push(e[7]); 
}); 
var final_data = createNodes(startnodes, endnodes, startnodetype, endnodetype, SendTime, PayTime, Total_Amt, Depth); 
makeGraph("#Network_graph", final_data); 

Im Folgenden finden Sie die createNodes() Funktion, die Knoten und Verbindungen erstellen können:

function createNodes(startnodes, endnodes, startnodetype, endnodetype, SendTime, PayTime, Total_Amt, Depth) { 
    var node_set = []; 
    var links = []; 
    var nodetype = d3.set(); 
    startnodes.forEach(function(src, i) { 
    var tgt = endnodes[i]; 
    if (!node_set.find(function(d) { 
     return d.id == src 
     })) { 
     node_set.push({ 
     id: src, 
     type: startnodetype[i] 
     }); 
    } 
    if (!node_set.find(function(d) { 
     return d.id == tgt 
     })) { 
     node_set.push({ 
     id: tgt, 
     type: endnodetype[i] 
     }); 
    } 

    links.push({ 
     source: src, 
     target: tgt, 
     sendtime: SendTime[i], 
     paytime: PayTime[i], 
     total_amt: Total_Amt[i], 
     depth: Depth[i], 
     value: 1 
    }); 
    }); 

    startnodetype.forEach(function(src, i) { 
    var tgt_type = endnodetype[i]; 
    nodetype.add(src); 
    nodetype.add(tgt_type); 
    }); 

    var d3GraphData = { 
    nodes: node_set.map(function(d) { 
     return { 
     id: d.id, 
     type: d.type, 
     group: 1 
     } 
    }), 
    links: links, 
    nodetype: nodetype.values().map(function(d) { 
     return { 
     id: d.id, 
     group: 1 
     } 
    }) 
    } 
    return d3GraphData; 

}; 

Jetzt in meiner makeGraph() Funktion, ich versuche, einige Daten anzuzeigen, während der Mauszeiger über Knoten und Links mit einem Tooltip.

Knoten: d.id und d.type, Links: d.paytime, d.Sendtime, d.Amount und d.depth

Es Szenarien, in denen "Quelle" und "Ziel" zwischen mehreren Interaktionen sie

["C2", "ID2", "Customer", "ID_Card", "2015-1-1", "2015-1-1", 500.0, 2], 
["C2", "ID2", "Customer", "ID_Card", "2015-1-2", "2015-1-3", 700.0, 2] 

So über die Links auf schweben, ich brauche

PayTime: 2015-1-3 
    Amount: 700 
    SendTime: 2015-1-2 
    Depth: 3 

    PayTime: 2015-1-1 
    Amount: 500 
    SendTime: 2015-1-1 
    Depth: 2 

Für diese anzuzeigen, in der Mouseover-Funktion, eine Funktion, die alle Daten zwischen den bereitet Quell- und Zielknoten:

  .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); 
     }); 

Danach muss ich die Tooltip aufzufüllen die Array gefilterten Daten. Aber das ist mir immer, wie ich Javascript neu bin/d3.js

Hier ist die fiddle

Answer 1

Dies ist mein Vorschlag: basierend auf filteredLinks, eine Auswahl erstellen, die die HTML zu Ihrem tooltip div anhängen:

var list = tooltip.selectAll(".list") 
    .data(filteredLinks) 
    .enter() 
    .append("div"); 

list.html(function(d) { 
    return "Paytime: " + d.paytime + "<br>Sendtime: " + d.sendtime 
    + "<br>Amount: " + d.total_amt + "<br>Depth: " + d.depth + "<br><br>"; 
}); 

tooltip.transition() 
    .duration(300) 
    .style("opacity", .8); 

tooltip.style("left", (d3.event.pageX) + "px") 
    .style("top", (d3.event.pageY + 10) + "px"); 

Hier ist die aktualisierte Geige: https://jsfiddle.net/4av3ctea/

PS: Betrachten sie diese Zeilen weiter machen ... jetzt es über sie sehr schwierig Schweben ist. Eine einfache Alternative ist die Schaffung einer breiteren, transparenten Linie, um die Mausereignisse