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

这是你在输出中得到的。

（请注意，在编译之前，您必须修复一些拼写错误。）

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

1 个答案: