노드와 링크를 구성하여 그래프(차트말고 트리같이 노드와 링크로 구성하는 그래프)를 생성하는건데 인터넷에 공개된 예제를 가져와서 수정한것입니다.
그런데 노드들이 저렇게 다닥다닥 붙어서 생성이 되네요..
노드 안의 글자는 위치조정만 하면 되니까 무시하셔두 되구요
노드들만 다닥다닥 안 붙게하고싶은데
이게 어느 부분에서인가 노드들의 위치 좌표를 설정해서 그 좌표대로 생성되는거 같은데
어디서 설정이 되는지 모르겟습니다..
아래 코드를 통해 제가 의문이 가는 부분에 질문을 적겠습니다.
1. Text.json
{
"nodes": [
{"id": "Myriel", "group": 1},
{"id": "Napoleon", "group": 2},
{"id": "Mlle.Baptistine", "group": 3},
{"id": "A", "group": 4}
],
"links": [
{"source": "Napoleon", "target": "Myriel", "value": 100},
{"source": "Mlle.Baptistine", "target": "Myriel", "value": 200},
{"source": "Mlle.Baptistine", "target": "A", "value": 300}
]
}
2. Example.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
</style>
<svg width="1350" height="900"></svg>
<script>
var svg = d3.select("svg"),
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) {console.log(d); return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
↑ 의문1 : 이 부분이 정확히 무슨 역할인지 모르겠습니다. 구글링을 통해 대충 그래프를 만들때 사용하는거로 보이긴 하는데 자세히 모르겠네요 어쩌면 이 부분의 역할을 몰라서 못하고 있는걸지도 모르겠네요...
//d3.json("TestAll.json", function(error, graph) {
d3.json("Test.json", function(error, graph) {
if (error) throw error;
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(30); });
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 50)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var city = svg.append("g")
.selectAll("text")
.data(graph.nodes)
.enter()
.append("text")
.text(function(d){ return d.id })
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
↑ 의문2 : 이 부분에서 링크와 노드와 노드 안 내용을 생성하는건 알겠습니다. 혹시 여기서 자동으로 각 노드들의 좌표가 생성이 자동으로 되는 것인가요?
node.append("title")
.text(function(d) { return d.id; });
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.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; });
city
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
}
});
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
↑ 의문3 : 직접적으로는 이 부분에서 좌표를 적어주어 화면에 나타내주는 것이지만 위 함수들에서 리턴해주는 것을 보면 d.source.x입니다. 이미 해당 데이터가 x좌표와 y좌표를 가지고 있어서 이 함수는 해당 데이터에서 맞는 좌표들을 불러와서 html에 지정만 해주는거네요.. 이 좌표들은 대체 언제 지정이된거죠? 데이터인 json파일엔 적혀있지도 않은데요..
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;
}
</script>
