Question

JSON数据

    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]
]);

我解析它并将其传递给两个有助于创建图形的函数：

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

以下是 createNodes（）功能，可帮助创建节点和链接：

    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;

};

现在在我的 makeGraph（）函数中，我试图在使用工具提示将鼠标悬停在节点和链接上时显示一些数据。

节点：d.id和d.type，链接：d.paytime，d。发送时间，d.Amount和d.depth

“源”和“目标”之间存在多种交互的情况

 ["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]

所以在将鼠标悬停在链接上时，我需要显示

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

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

为此，在mouseover函数内部有一个函数，用于准备源节点和目标节点之间的所有数据：

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

在此之后，我需要使用数组过滤数据填充工具提示。但是，由于我是javascript / d3.js

的新手，这已经超越了我

以下是fiddle

Answer 1

这是我的建议：根据filteredLinks，创建一个将HTML附加到tooltip div的选项：

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");

这是您更新的小提琴：https://jsfiddle.net/4av3ctea/

PS：考虑让这些线条更宽......现在很难将它们盘旋在它们之上。一个简单的选择是创建一个更宽，更透明的线，以捕捉鼠标事件

从数组中填充d3.js工具提示

1 个答案: