D3 포스 감독 JSON 인접성 (adjacency) 목록

Question

나는과 같이, 그래프 인접성 (adjacency) 목록이 있습니다

{ 
    nodes: [ 
    { 
    "id": 1, 
    "label": "Mark 
    },...], 

    edges: [ 
    { 
    "source": 1, 
    "target": 2 
    },....] 
} 

가장자리는 노드에서 ID를 사용!

저는 PHP를 사용하여 클라이언트 측에이 목록을 표시했습니다.

D3에서 JSON을로드 할 수 없습니다. 는 그래서 수동으로 구문 분석하려고 :

var width = window.innerWidth, 
     height = window.innerHeight; 

    var color = d3.scale.category20(); 

    var force = d3.layout.force() 
     .linkDistance(40) 
     .linkStrength(2) 
     .charge(-120) 
     .size([width, height]); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    var nodes = [], links = []; 

    d3.json(null, function(error) 
    { 
    JSONData.nodes.forEach(function(node) 
    { 
     nodes.push(node); 
    }); 

    JSONData.edges.forEach(function(edge) 
    { 
     links.push({source: edge.source, target: edge.target}); 
    }); 

    force.nodes(nodes) 
    .links(links) 
    .start(); 

    var link = svg.selectAll(".link") 
      .data(links) 
      .enter().append("path") 
      .attr("fill", "none") 
      .attr("class", "link"); 

    var node = svg.selectAll(".node") 
      .data(nodes) 
      .enter().append("circle") 
      .attr("class", "node") 
      .attr("r", 5) 
      .style("fill", "#4682B4") 
      .call(force.drag); 

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

    force.on("tick", function() 
    { 
     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; }); 
    }); 
    }); 

하지만, 내가 볼 수있는 모든 노드가 아닌 가장자리입니다. 다음과 함께 CSS 파일을 추가했습니다 :

.node { 
    stroke: #4682B4; 
    stroke-width: 1.5px; 
} 

.link { 
    stroke: #ddd; 
    stroke-width: 1.5px; 
} 

그러나 아무 소용이 없습니다. 이 문제를 해결하는 방법이 있습니까?

Answer 1

당신은 사용할 필요가 : 어쩌면 또한 그들은 라인 아닌 경로에 해당 있도록 몇 가지 다른 속성을 변경해야합니다 (

 .enter().append("line") 

대신

 .enter().append("path") 

의).

또는 직선 대신 복잡한 경로를 그릴 수도 있지만, 과장 될 수 있습니다.

는 편집 : 난 그냥이 관련된 흥미로운 질문에 발견

:

enter link description here는 - 힘 레이아웃에 링크를 표시하는 동안 문제의 다른 종류를 설명합니다 - 당신이 유사한 장애물에 충돌하지 않는 확인

enter link description here - 비슷한 것을하기로 결심한다면, 줄 대신 곡선을 그려야하는 사람

하지만이 답변과 의견이 충분하다고 생각하면 충분합니다. 당신이 원하는 것을 얻을 수있는 ient.