D3 : D3에서 할 수 있습니까?

Question

FLARE 또는 기타 차트에서 JSON 파일의 데이터를 사용하는 사용자 간의 D3 전자 메일 통신을 차트에 표시하려고합니다. 사용자는 그래프에서 노드로 표현할 수 있으며 노드 사이의 전자 메일을 링크로 사용할 수 있습니다. D3에 발표 할 수 있고 누군가이 문제에 대한 해결책을 알고 있다면 알려 주시기 바랍니다.

다음은 단일 이메일에 대한 데이터의 샘플 배열입니다. 다른 테이블에서 사용자 이름, 제목, 전자 메일, 날짜 및 시간과 같은 전자 메일 세부 정보가 변경되었습니다.

{ 
"metadataAsStrings": { 
"doc-from": "User 1", 
"doc-sender": "User 1", 
"caat-derived-recipients": "User 2", 
"doc-subject": "Title Email 1" 
"doc-recipient": "User 2", 
"caat-normalized-author": "User 1", 
"caat-derived-email-action": "REPLY" 
"caat-derived-end-email": "true", 
"caat-derived-inclusive-email-reason": "MESSAGE" 
"doc-date": "2014/09/25 10:20:00", 
"doc-is", "User 2" 
} 
} 

Answer 1

이것은 강제 레이아웃을 사용하면 매우 쉽습니다. 여기 plnkr : http://plnkr.co/edit/1Mub7rTUKQuuAB6TAoJb?p=preview 실제로 내가 한 것은 d3 강제 레이아웃에 필요한 구조에 따라 json을 작성한 것입니다. 내가 분석 약간 할, 당신의 데이터와 비슷한 뭔가를 가정 :

d3.json("graph.json", function(error, graphData) { 
     //setup the data 
     var graph = {}; 
     graph.nodes = []; 
     graph.links = []; 
     var test = []; 

     // set the node data 
     for (var nodeIndex in graphData.nodes){ 
      var curr_node = graphData.nodes[nodeIndex]; 
      graph.nodes[curr_node.id] = { 
       x: curr_node.x, 
       y: curr_node.y, 
       color: curr_node.color, 
       size: curr_node.size, 
       label: curr_node.label, 
       id: curr_node.id 

      }; 
      test.push(Number(curr_node.id)); 
     } 
     // sort the IDs 
     function sortNumber(a,b) { 
      return a - b; 
     } 

     test.sort(sortNumber); 

     // now go over each ID and set it in the 
     var tmpNodes = []; 
     for (var index in test){ 
      tmpNodes.push(graph.nodes[test[index]]); 
     } 
     graph.nodes = tmpNodes; 
     // now setup the edges/links 
     for (edge in graphData.edges){ 
      var curr_link = graphData.edges[edge]; 
      graph.links.push({source: test.indexOf(Number(curr_link.source)), target: test.indexOf(Number(curr_link.target)), weight: 1.0}); 
     } 
     force 
      .nodes(graph.nodes) 
      .links(graph.links) 
      .start(); 

     link = link.data(graph.links) 
     .enter().append("line") 
      .attr("class", "link"); 

     node = node 
     .data(graph.nodes) 
     .enter().append("g") 
     .attr("class", "node") 

     .call(drag) 
     .on("dblclick", dblclick) 
     .on("mouseover", function(d){ 
      hover.html(d.id + ": " + d.label); 
     }) 
     .on("mouseleave", function(d){ 
      hover.html(""); 
     }) 
      ; 

    node.append("circle") 
     .attr("r", function(d,i){ 
       return d.size/2; 
      }) 
      .attr("fill", function(d,i){ 
       return d.color; 
      }) 

      ; 

     var textNode = node.append("g"); 


     var text = textNode.append("text") 
      .attr("dx", 12) 
      .attr("dy", ".35em") 
      .attr("font-size", function(d){ 
      return 12+(d.size-1)/7+"px"; 
      }) 
      .text(function(d) { 
      return d.label }); 

     textNode.append("rect") 
     .attr("x",function(d,i){ 
      var g = node[0][i].childNodes[1]; 
      return -g.getBBox().width; 
     }) 
      .attr("y",function(d,i){ 
      var g = node[0][i].childNodes[1].childNodes[0]; 
      return -g.getBBox().height+10; 
     }) 
     .attr("fill","white") 
     .attr("fill-opacity",0.25) 
     .attr("width",function(d,i){ 
      var g = node[0][i].childNodes[1]; 
      return g.getBBox().width; 
     }) 
     .attr("height",function(d,i){ 
      var g = node[0][i].childNodes[1].childNodes[0]; 
      return g.getBBox().height; 
     })  
     ; 
    }); 

이 그래서가에서 일어나는 그런 다음

{ 
    "edges": [ 
    { 
     "source":"1", 
     "target": "2", 
     "color": "yellow", 
     "weight": "1.0", 
     "doc-subject": "Title Email 1" 
    }, 
    { 
     "source":"2", 
     "target": "3", 
     "color": "blue", 
     "weight": "1.0", 
     "doc-subject": "Title Email 2" 
    } 
    ], 
    "nodes": [ 
    { 
     "label":"user 1", 
     "x":-1015.1223754882812,"y":679.421875, 
     "id":"1","attributes":{},"color":"rgb(175,156,171)", 
     "size":20 
    }, 
    { 
     "label":"user 2", 
     "x":-915.1223754882812,"y":659.421875, 
     "id":"2","attributes":{},"color":"rgb(175,156,171)", 
     "size":15 
    }, 
    { 
     "label":"user 3", 
     "x":-1015.1223754882812,"y":579.421875, 
     "id":"3","attributes":{},"color":"rgb(175,156,171)", 
     "size":15 
    } 
    ] 
} 

을, D3에, 나는 그것을 구문 분석이 코드를 코드, d3은 json을 얻습니다. 데이터 설정을 더 잘 수행하기 위해 d3을 파싱하는 작업을 조금합니다. (이렇게 만들어서 더 많은 사용자를 추가하고 설정 한 순서보다는 ID로 정렬 할 수있었습니다. 배열에서) 그리고 나서 d3에 대한 링크와 노드를 그릴 수 있습니다.

희망이 도움이됩니다.