d3.js make layout

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

2 "http://www.w3.org/TR/html4/loose.dtd">

3 <html>

4 <head>

5 <meta charset=“UTF-8”>

6 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

7 <style>

8 circle {

9 stroke:black;

10 stroke-width:1px;

11 fill:MediumSeaGreen;

12 opacity:0.5;

13 }

14 </style>

15 </head>

16 <body>

17 <script>

18 d3.json('data/stations_graph.json', function(data){

d3.json('data/stations_graph.json', function(data){

지하철 연결7 <style>

8 circle {

9 stroke:black;

10 stroke-width:1px;

11 fill:MediumSeaGreen;

12 opacity:0.5;

13 }

14 </style>

선 색깔 : 검정선 두께 : 1 픽셀도형 채우기 :

투명도 : 50%

circle

지하철 연결19 var width = 1500, height = 1500;

20

21 var svg = d3.select("body")

22 .append("svg")

23 .attr("width", width)

24 .attr("height", height);

25 var node = svg.selectAll("circle.node")

26 .data(data.nodes)

27 .enter()

28 .append("circle")

29 .attr("class", "node")

30 .attr("r", 12);

1500 1500width height


20


22 .append("svg")





27 .enter()



30 .attr("r", 12);


<html><head></head><body></body></html>


20


22 .append("svg")





27 .enter()



30 .attr("r", 12);


<html><head></head><body> <svg> </svg></body></html>


20


22 .append("svg")





27 .enter()



30 .attr("r", 12);


<html><head></head><body> <svg > </svg></body></html>


20


22 .append("svg")





27 .enter()



30 .attr("r", 12);


<html><head></head><body> <svg width=“width” > </svg></body></html>

<html><head></head><body> <svg width=“width” > </svg></body></html>


20


22 .append("svg")





27 .enter()



30 .attr("r", 12);


<html><head></head><body> <svg width=“1500” > </svg></body></html>


20


22 .append("svg")





27 .enter()



30 .attr("r", 12);


<html><head></head><body> <svg width=“1500”, heigh=“1500” > </svg></body></html>


20


22 .append("svg")


24 .attr(“height", height);



27 .enter()



30 .attr("r", 12);




20


22 .append("svg")





27 .enter()



30 .attr("r", 12);

1500 px

1500 px SVG이미지



20


22 .append("svg")





27 .enter()



30 .attr("r", 12);

stations_graph.json{"links": [{"source": 0,"target": 264},{"source": 0,"target": 6},...],"nodes": [{"name": "St George"},{"name": "Hunts Point Av"},...

이 부분을 사용



20


22 .append("svg")





27 .enter()



30 .attr("r", 12);

<html><head></head><body> <svg width=“1500”, heigh=“1500” >

<circle>…<circle>…….<circle></circle>

</svg></body></html>


20


22 .append("svg")





27 .enter()



30 .attr("r", 12);

node개수만큼

선 색깔 : 검정선 두께 : 1 픽셀도형 채우기 :

투명도 : 50%

circle


<circle class=“node” >…<circle class=“node” >…….<circle class=“node” ></circle>



20


22 .append("svg")





27 .enter()



30 .attr("r", 12);


<circle class=“node” r=12 >…<circle class=“node” r=12 >…….<circle class=“node” r=12 ></circle>



20


22 .append("svg")





27 .enter()



30 .attr("r", 12); …………...

12node

개수만큼

지하철 연결32 var link = svg.selectAll("line.link")33 .data(data.links)34 .enter().append("line")35 .style('stroke','black');3637 var force = d3.layout.force()38 .charge(-120)39 .linkDistance(30)40 .size([width, height])41 .nodes(data.nodes)42 .links(data.links)43 .start();

stations_graph.json{"links": [{"source": 0,"target": 264},{"source": 0,"target": 6},...],"nodes": [{"name": "St George"},{"name": "Hunts Point Av"},...

이 부분을 사용


Svg 내에 검은 선 생성

지하철 연결

Force-directed algorithm• 서로간 반발력이 있는

노드가 연결되는 알고리즘

• Node 끼리 겹치지 않게 정렬된다

32 var link = svg.selectAll("line.link")33 .data(data.links)34 .enter().append("line")35 .style('stroke','black');3637 var force = d3.layout.force()38 .charge(-120)39 .linkDistance(30)40 .size([width, height])41 .nodes(data.nodes)42 .links(data.links)43 .start();

http://cs.brown.edu/~rt/gdhandbook/chapters/force-directed.pdf




Force-directed algorithm 을 위한 초기화 단계

전하량 -120( 같은 전하는 밀어내므로 )적용되는 공간 : width, height 만큼Node, link 를 불러오는 것은 동일

지하철 연결45 force.on("tick", function() {

46 link.attr("x1", function(d) { return d.source.x; })

47 .attr("y1", function(d) { return d.source.y; })

48 .attr("x2", function(d) { return d.target.x; })

49 .attr("y2", function(d) { return d.target.y; });

5051 node.attr("cx", function(d) { return d.x; })

52 .attr("cy", function(d) { return d.y; });53 });5455 node.call(force.drag);56 });57</script>58</body>59</html>








위치를 계산하는데 사용Function():D3 에서 “적절한값”을 “적절히”찾아주는데 사용








드래그 할 수 있게 사용

지하철 연결

http://d3js.org

http://d3js.org/

http://d3js.org/

d3.js make layout

Technology