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コードは力有向グラフレンダリングすることです。また、私はノード番号ですVaRのstartnodesとVARのエンドノードが必要

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

これは出力結果です。

（あなたはそれがコンパイルされる前に修正する必要があり、コードのいくつかのタイプミスがあることに注意してください。）