<div> <div style="text-align:left;"><img src="http://thimg.todayhumor.co.kr/upfile/201608/14725625068c54d2a52e7545fe9146362296c1015a__mn97746__w470__h341__f8238__Ym201608.png" width="470" height="341" alt="캡처.PNG" style="border:none;" filesize="8238"></div> <div style="text-align:left;"><br></div> <div style="text-align:left;">노드와 링크를 구성하여 그래프(차트말고 트리같이 노드와 링크로 구성하는 그래프)를 생성하는건데 인터넷에 공개된 예제를 가져와서 수정한것입니다.</div> <div style="text-align:left;">그런데 노드들이 저렇게 다닥다닥 붙어서 생성이 되네요..</div> <div style="text-align:left;">노드 안의 글자는 위치조정만 하면 되니까 무시하셔두 되구요</div> <div style="text-align:left;"><br></div> <div style="text-align:left;">노드들만 다닥다닥 안 붙게하고싶은데</div> <div style="text-align:left;">이게 어느 부분에서인가 노드들의 위치 좌표를 설정해서 그 좌표대로 생성되는거 같은데</div> <div style="text-align:left;">어디서 설정이 되는지 모르겟습니다..</div> <div style="text-align:left;"><br></div> <div style="text-align:left;">아래 코드를 통해 제가 의문이 가는 부분에 질문을 적겠습니다.</div> <div style="text-align:left;"><br></div> <div style="text-align:left;"><b><font size="5">1. Text.json</font></b></div> <div style="text-align:left;"><br></div> <div style="text-align:left;"> <div>{</div> <div> "nodes": [</div> <div> {"id": "Myriel", "group": 1},</div> <div> {"id": "Napoleon", "group": 2},</div> <div> {"id": "Mlle.Baptistine", "group": 3},</div> <div> {"id": "A", "group": 4}</div> <div><br></div> <div> ],</div> <div> "links": [</div> <div> {"source": "Napoleon", "target": "Myriel", "value": 100},</div> <div> {"source": "Mlle.Baptistine", "target": "Myriel", "value": 200},</div> <div> {"source": "Mlle.Baptistine", "target": "A", "value": 300}</div> <div><br></div> <div> ]</div> <div>}</div> <div><br></div></div> <div style="text-align:left;"><br></div><br></div> <div><b><font size="5">2. Example.html</font></b></div> <div><br></div> <div><!DOCTYPE html></div> <div><meta charset="utf-8"></div> <div><style></div> <div><br></div> <div>.links line {</div> <div> stroke: #999;</div> <div> stroke-opacity: 0.6;</div> <div>}</div> <div><br></div> <div>.nodes circle {</div> <div> stroke: #fff;</div> <div> stroke-width: 1.5px;</div> <div>}</div> <div><br></div> <div></style></div> <div><svg width="1350" height="900"></svg></div> <div><script src="<a target="_blank" href="https://d3js.org/d3.v4.min.js">https://d3js.org/d3.v4.min.js</a>"></script></div> <div><script></div> <div>var svg = d3.select("svg"),</div> <div> width = +svg.attr("width"),</div> <div> height = +svg.attr("height");</div> <div><br></div> <div>★<span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span></div> <div>var color = d3.scaleOrdinal(d3.schemeCategory20);</div> <div><br></div> <div>var simulation = d3.forceSimulation()</div> <div> .force("link", d3.forceLink().id(function(d) {console.log(d); return d.id; }))</div> <div> .force("charge", d3.forceManyBody())</div> <div> .force("center", d3.forceCenter(width / 2, height / 2));</div> <div>★<span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span></div> <div><b><font size="3">↑ 의문1 : 이 부분이 정확히 무슨 역할인지 모르겠습니다. 구글링을 통해 대충 그래프를 만들때 사용하는거로 보이긴 하는데 자세히 모르겠네요 </font></b><b style="font-size:9pt;line-height:1.5;"><font size="3">어쩌면 이 부분의 역할을 몰라서 못하고 있는걸지도 모르겠네요...</font></b></div> <div><br></div> <div><br></div> <div><br></div> <div>//d3.json("TestAll.json", function(error, graph) {</div> <div>d3.json("Test.json", function(error, graph) {</div> <div> if (error) throw error;</div> <div><br></div> <div>★<span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span></div> <div> var link = svg.append("g")</div> <div> .attr("class", "links")</div> <div> .selectAll("line")</div> <div> .data(graph.links)</div> <div> .enter().append("line")</div> <div> .attr("stroke-width", function(d) { return Math.sqrt(30); });</div> <div><br></div> <div> var node = svg.append("g")</div> <div> .attr("class", "nodes")</div> <div> .selectAll("circle")</div> <div> .data(graph.nodes)</div> <div> .enter().append("circle")</div> <div> .attr("r", 50)</div> <div> .attr("fill", function(d) { return color(d.group); })</div> <div> .call(d3.drag()</div> <div> .on("start", dragstarted)</div> <div> .on("drag", dragged)</div> <div> .on("end", dragended));</div> <div><br></div> <div> var city = svg.append("g")</div> <div> .selectAll("text")</div> <div> .data(graph.nodes)</div> <div> .enter()</div> <div> .append("text")</div> <div> .text(function(d){ return d.id })</div> <div>★<span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span></div> <div><b><font size="3">↑ 의문2 : 이 부분에서 링크와 노드와 노드 안 내용을 생성하는건 알겠습니다. 혹시 여기서 자동으로 각 노드들의 좌표가 생성이 자동으로 되는 것인가요?</font></b></div> <div><span style="font-size:9pt;line-height:1.5;"><br></span></div> <div><span style="font-size:9pt;line-height:1.5;"><br></span></div> <div><br></div> <div> node.append("title")</div> <div> .text(function(d) { return d.id; });</div> <div><br></div> <div> simulation</div> <div> .nodes(graph.nodes)</div> <div> .on("tick", ticked);</div> <div><br></div> <div> simulation.force("link")</div> <div> .links(graph.links);</div> <div><br></div> <div><br></div> <div>★<span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span></div> <div> function ticked() {</div> <div> link</div> <div> .attr("x1", function(d) { return d.source.x; })</div> <div> .attr("y1", function(d) { return d.source.y; })</div> <div> .attr("x2", function(d) { return d.target.x; })</div> <div> .attr("y2", function(d) { return d.target.y; });</div> <div><br></div> <div> node</div> <div> .attr("cx", function(d) { return d.x; })</div> <div> .attr("cy", function(d) { return d.y; });</div> <div><br></div> <div> city</div> <div> .attr("x", function(d) { return d.x; })</div> <div> .attr("y", function(d) { return d.y; });</div> <div> }</div> <div>});</div> <div>★<span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span><span style="font-size:9pt;line-height:1.5;">★</span></div> <div><b><font size="3">↑ 의문3 : 직접적으로는 이 부분에서 좌표를 적어주어 화면에 나타내주는 것이지만 위 함수들에서 리턴해주는 것을 보면 d.source.x입니다. 이미 해당 데이터가 x좌표와 y좌표를 가지고 있어서 이 함수는 해당 데이터에서 맞는 좌표들을 불러와서 html에 지정만 해주는거네요.. 이 좌표들은 대체 언제 지정이된거죠? 데이터인 json파일엔 적혀있지도 않은데요..</font></b></div> <div><br></div> <div><br></div> <div><br></div> <div>function dragstarted(d) {</div> <div> if (!d3.event.active) simulation.alphaTarget(0.3).restart();</div> <div> d.fx = d.x;</div> <div> d.fy = d.y;</div> <div>}</div> <div><br></div> <div>function dragged(d) {</div> <div> d.fx = d3.event.x;</div> <div> d.fy = d3.event.y;</div> <div>}</div> <div><br></div> <div>function dragended(d) {</div> <div> if (!d3.event.active) simulation.alphaTarget(0);</div> <div> d.fx = null;</div> <div> d.fy = null;</div> <div>}</div> <div><br></div> <div></script></div> <div><br></div>
댓글 분란 또는 분쟁 때문에 전체 댓글이 블라인드 처리되었습니다.
