d3.js의 링크 및 노드에 대한 이벤트 위로 마우스를 가져 가면 텍스트가 표시됩니다.

HTML 페이지의 JSON 데이터는 다음과 같습니다.

   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,
     startnodetype: startnodetype, //
     endnodetype: endnodetype,    right way to pass them to makeGraph()?

     PayTime: PayTime,
     TXN_COUNT: TXN_COUNT,
     Total_Amt: Total_Amt,
     SendTime: SendTime        //

  }
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); })
    .on("mouseover",mouse_link);  // calling mouseover function for links

 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)
)
 .on("mouseover",mouse_node);   //calling the mouseover function for nodes

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

 function mouse_node() {// function to handle mouse_over events on nodes
         d3.select(this).transition()
              .style("left", "20px")
              .style("top", "20px")
              .attr("r",30)
              .style("fill","lightsteelblue")
              .text(d.startnodetype or d.endnodetype); //how do I select the nodetype depending on whether it is the start node or end node?

 function mouse_link(){/// mouse over event on links
       d3.select(this).transition()
            .duration(750)
            .style("left", "20px")
            .style("top", "20px")
            .attr("r",30)
            .style("fill","lightsteelblue")
            .text(d.PayTime)
            .text(d.TXN_COUNT)
            .text(d.Total_Amt)
            .text(d.Send_Time)  // right way to display the texts?




$(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_data createNodes(startnodes,endnodes,startnodetype,endnodetype,PayTime,TXN_COUNT,Total_Amount,SendTime);                           
  makeGraph("#Network_graph",final_nodes)

  });

또한 내 HTML 페이지에서 노드 또는 링크를 클릭 할 때 관련 텍스트를 표시하는 div :

    <div id="graph"></div>
    < div id = "text"</div? 

텍스트가 더 나은 방법 또는 도구 설명입니까? 이 div를 d3.js에 연결하는 방법은 무엇입니까? HTML 본문의 일부가되기를 원하기 때문에 텍스트를 생각했습니다.

나는 전에 자바 스크립트 또는 d3.js에서 일한 적이 없습니다. 너무 많은 코드를 붙여 넣으면 죄송합니다. 이벤트 기능을 사용하는 방법과 위치를 읽고 이해했습니다. 그러나 위가 그것을 구현하는 올바른 방법인지 여전히 확실하지 않습니다. 특히 소스의 JSON 데이터가 고정 된 크기가 아닐 때.