javascript - d3.js 代码仅渲染节点而不渲染链接。还需要一种向节点和链接添加文本的方法

Question

下面是我的 json 数据在 html 页面中的样子:

var IDData = JSON.stringify([["node/105173", "node/38180995", "Agent", "Customer", "1379644.0", 1, 264.0, "1374903"], ["node/1061", "node/21373542", "Agent", "Customer", "530848.0", 1, 3000.0, "529502"]....]

数组的数组长度不同，但其中元素的位置始终相同。

下面是我的 d3.js 代码，用于渲染力定向图:

function createNodes (IDData) {
   var nodes = [{group:1, group: 1}]; 
   var links = [];
   IDData.forEach(function(item){
   nodes.push({id: item, group: 1})
   links.push({source: item, target: item, value: 1}) // ;
  });
var d3GraphData = {
   nodes: nodes,
   links: links
  } 
  return d3GraphData;
  };

function makeGraph (selector, d3GraphData) {
   var svg = d3.select(selector),
   width = +svg.attr("width"),
   height = +svg.attr("height");

   var color = d3.scaleOrdinal(d3.schemeCategory20);
   var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(d3GraphData.links)
    .enter()
    .append("line")
    .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

 var node = svg.append("g")
   .attr("class", "nodes")
   .selectAll("circle")
   .data(d3GraphData.nodes)
   .enter()
   .append("circle")
   .attr("r", 5)
   .attr("fill", function(d) { return color(d.group); })
   .call(d3.drag()
   .on("start", dragstarted)
   .on("drag", dragged)
   .on("end", dragended)
 );

 node.append("title")
   .text(function(d) { return d.id; });

  simulation
    .nodes(d3GraphData.nodes)
    .on("tick", ticked);

 simulation.force("link")
    .links(d3GraphData.links);

 function ticked() {
   link
    .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; });

 node
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

         }

        function dragstarted(d) {
 if (!d3.event.active) simulation.alphaTarget(0.3).restart();
 d.fx = d.x;
 d.fy = d.y;
    }

 function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
       }

     function dragended(d) {
          if (!d3.event.active) simulation.alphaTarget(0);
           d.fx = null;
           d.fy = null;
     }

 $(document ).ready(function() {
     console.log(IDData);
     var galData = JSON.parse(IDData);
     var startnodes = [];
     var endnodes = [];
     var nodetype1 = [];
     var nodetype2 = [];
     var PayTime = [];
     var TXN_COUNT = [];
     var Total_Amt = [];
     var SendTime = [];

    galData.map(function(e,i){
     startnodes.push(e[0]);
     endnodes.push(e[1]);
     nodetype1.push(e[2]);
     nodetype1.push(e[3]);
     PayTime.push(e[4]);
     TXN_COUNT.push(e[5]);
     Total_Amt.push(e[6]);
     SendTime.push(e[7]);
    });
   var final_nodes = createNodes(startnodes,endnodes);                           
   makeGraph("#Network_graph",final_nodes);

    });

另外，我需要 var startnodes 和 var endnodes，它们是节点号； var nodetype1 和 var nodetype2 是作为节点属性的节点类型。这需要在节点和 var PayTime 、 var TXN_COUNT、var Total_Amt、var SendTime 上显示为文本作为链接属性。

现在我只看到节点而没有链接。以前从未使用过 d3.js。更多的是后端人员。

如果粘贴的代码过多，敬请谅解。

Answer 1

您的问题在于如何将数据转换为D3所需的格式。现在，您尝试使用 createNodes 函数通过为每个链接传入相等长度的开始/结束(即源/目标)节点列表来为您执行此操作。但它不太正常工作，因为您只获取起始节点，因此每个链接都连接同一节点，因此不可见。

我重写了 createNodes 以创建 D3 期望的节点/链接。唯一真正的技巧是使用 d3.set()创建节点列表。

function createNodes (start_nodes, end_nodes) {
  var node_set = d3.set(); 
  var links = [];
  start_nodes.forEach(function(src, i){
    var tgt = end_nodes[i];
    node_set.add(src);
    node_set.add(tgt);
    links.push({source: src, target: tgt, value: 1});
  });
  var d3GraphData = {
    nodes: node_set.values().map(function(d){ return {id: d, group: 1} }),
    links: links
  } 
  return d3GraphData;
};

这就是您在输出中得到的内容。

(请注意，代码中有一些拼写错误，您必须在编译之前修复它们。)