D3 Force-Directed 그래프 예제를 수정합니다

StackOverflow https://stackoverflow.com//questions/24015930

문제

저는 JavaScript와 D3.js의 새로운 기능이며 어떻게 작동하는지 이해하려고 노력하고 있습니다.나는 강제로 지시 된 그래프 예제에서 놀고있다. http://bl.ocks.org/mbostock/4062045

제가 원하는 작업은 JSON 링크를 배열 번호로 노드 이름으로 변경하는 것입니다.나는 작은 네트워크 토폴로지를 시각화하려고하고 있으며, 노드 이웃이 모두 설정되었습니다.다음은 내가 사용하고자하는 JSON 데이터입니다 : 

{
  "nodes":[
    {"name":"stkbl0001","group":1},
    {"name":"stkbl0002","group":1},
    {"name":"stkbl0003","group":1},
    {"name":"stkbl0004","group":1},
    {"name":"stkbl0005","group":1}
  ],
  "links":[
    {"source":"stkbl0001","target":"stkbl0005","value":3},
    {"source":"stkbl0002","target":"stkbl0005","value":3},
    {"source":"stkbl0003","target":"stkbl0005","value":3},
    {"source":"stkbl0004","target":"stkbl0005","value":3}
  ]
.

D3 코드를 변경 하여이 모든 것을 함께 묶는 방법을 알지 못합니다.나는 배열 번호가 링크로 함께 붙어있는 섹션을 보지 못한다.이것은 아마도 어리석은 질문 일 것입니다. 그러나 그것은 나를 많이 도울 것입니다!

편집 :

여기에 자바 스크립트 코드는 Lars Kotthoff의 입력을 기반으로 한 JavaScript 코드입니다. 

<!DOCTYPE html>
<meta charset="utf-8">
<style>

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

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var color = d3.scale.category20();

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

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

d3.json("mini.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
      .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

  var nodeMap = {};
  nodes.forEach(function(d) { nodeMap[d.name] = d; });

  links.forEach(function(l) {
      l.source = nodeMap[l.source];
      l.target = nodeMap[l.target];
  })

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

  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; });
  });
});
</script>
.

LINE 55 (nodes.foreach (함수 (D) {NodeMap [d.name]= d];)에 실패합니다.);) 오류가 있습니다 : 

Uncaught ReferenceError: nodes is not defined
.

도움이 되었습니까?

해결책

이 링크 예제를 기반으로 작업 예제에 연결됩니다.

강제 레이아웃의 초기화 직전에 중요한 코드가 배치됩니다. 

var nodeMap = {};

graph.nodes.forEach(function(d) { nodeMap[d.name] = d; });

graph.links.forEach(function(l) {
    l.source = nodeMap[l.source];
    l.target = nodeMap[l.target];
})

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

원래 형식이 사용되는 것과 동일한 방식으로 데이터 형식을 사용할 수 있습니다 (및 그물의 많은 예제에서 원래 형식을 따르십시오.문제).

(JSON 파일은 JSFIDDLE의 제한 때문에 JSON 파일이 사용되지 않습니다.JSON 파일도 포함)

희망이 도움이됩니다.

다른 팁

D3는 강제 레이아웃에 대한 링크 소스 및 대상을 지정하는 두 가지 방법을 제공합니다.링크 된 예제에서 첫 번째는 노드 배열에 노드의 색인을 제공하는 것입니다.힘 레이아웃이 시작되면 실제 노드에 대한 참조로 대체됩니다.두 번째는 실제 노드에 대한 참조를 명시 적으로 제공하는 것입니다.

노드를 이름으로 참조하려면 해당 참조를 해결할 수있는 항목이 필요합니다.예 : 

var nodeMap = {};
graph.nodes.forEach(function(d) { nodeMap[d.name] = d; });
.

다음

할 수 있습니다. 
graph.links.forEach(function(l) {
  l.source = nodeMap[l.source];
  l.target = nodeMap[l.target];
})
.

물론 links를 정의하여 다음과 같이 시작하려면 다음을 사용하십시오. 

"links":[
 {"source":nodeMap["stkbl0001"],"target":nodeMap["stkbl0005"],"value":3}
]
.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top