d3.js version4로 간단한 트리 다이어그램 만들기
18692 단어 d3.js자바스크립트DataVisualization
버전
d3.js의 버전은 4.1.0입니다.
시각화 결과
데이터
지하철 역 데이터를 샘플로 사용합니다.
data.json{
"name": "都営地下鉄",
"parent": "null",
"children": [
{
"name": "大江戸線",
"parent": "都営地下鉄",
"children": [
{
"name": "青山一丁目",
"parent": "大江戸線"
},
{
"name": "六本木",
"parent": "大江戸線"
}
]
},
{
"name": "浅草線",
"parent": "都営地下鉄"
}
]
}
코드
js
본 기사에서는 코드를 일부 발췌하여 게재하고 있습니다. 자세한 내용은 모든 코드을 참조하십시오.
SVG 만들기
Visualization.jsd3.select('body').append('svg')
.attr('width', this.width)
.attr('height', this.height)
.append("g")
.attr("transform", "translate(" + this.margin.left + "," + (this.margin.top) + ")");
Tree 만들기
Visualization.jsthis.margin = {top: 50, right: 0, bottom: 0, left: 200};
this.width = window.innerWidth - this.margin.left - this.margin.right,
this.height = window.innerHeight - this.margin.top - this.margin.bottom;
this.tree = d3.tree()
.size([this.height, this.width - 400]);
json 로드
Visualization.jsd3.json("datasets/data.json", (error, data) => {
this.root = d3.hierarchy(data);
this.tree(this.root);
});
hierarchy 함수를 사용합니다.
d3/d3-hierarchy: 2D layout algorithms for visualizing hierarchical data.
선으로 연결
Visualization.jsthis.svg.selectAll(".link")
.data(this.root.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.y + d.parent.y) / 2 + "," + d.x
+ " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});
Node 만들기
Visualization.jsthis.svg.selectAll(".node")
.data(this.root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
원 표시
Visualization.jsthis.node.append("circle")
.attr("r", 2.5);
역명 표시
text를 추가합니다.
Visualization.jsthis.node.append("text")
.attr("dy", 3)
.attr("x", function(d) { return d.children ? -8 : 8; })
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.data.name; });
CSS
dataViz-playground/main.css at 311df7110266ccfed7f5b0657b24f72a1fe44e28 · naoyashiga/dataViz-playground
Reference
이 문제에 관하여(d3.js version4로 간단한 트리 다이어그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/naoyashiga/items/f1c53a739e40e3ef4fc0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
데이터
지하철 역 데이터를 샘플로 사용합니다.
data.json{
"name": "都営地下鉄",
"parent": "null",
"children": [
{
"name": "大江戸線",
"parent": "都営地下鉄",
"children": [
{
"name": "青山一丁目",
"parent": "大江戸線"
},
{
"name": "六本木",
"parent": "大江戸線"
}
]
},
{
"name": "浅草線",
"parent": "都営地下鉄"
}
]
}
코드
js
본 기사에서는 코드를 일부 발췌하여 게재하고 있습니다. 자세한 내용은 모든 코드을 참조하십시오.
SVG 만들기
Visualization.jsd3.select('body').append('svg')
.attr('width', this.width)
.attr('height', this.height)
.append("g")
.attr("transform", "translate(" + this.margin.left + "," + (this.margin.top) + ")");
Tree 만들기
Visualization.jsthis.margin = {top: 50, right: 0, bottom: 0, left: 200};
this.width = window.innerWidth - this.margin.left - this.margin.right,
this.height = window.innerHeight - this.margin.top - this.margin.bottom;
this.tree = d3.tree()
.size([this.height, this.width - 400]);
json 로드
Visualization.jsd3.json("datasets/data.json", (error, data) => {
this.root = d3.hierarchy(data);
this.tree(this.root);
});
hierarchy 함수를 사용합니다.
d3/d3-hierarchy: 2D layout algorithms for visualizing hierarchical data.
선으로 연결
Visualization.jsthis.svg.selectAll(".link")
.data(this.root.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.y + d.parent.y) / 2 + "," + d.x
+ " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});
Node 만들기
Visualization.jsthis.svg.selectAll(".node")
.data(this.root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
원 표시
Visualization.jsthis.node.append("circle")
.attr("r", 2.5);
역명 표시
text를 추가합니다.
Visualization.jsthis.node.append("text")
.attr("dy", 3)
.attr("x", function(d) { return d.children ? -8 : 8; })
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.data.name; });
CSS
dataViz-playground/main.css at 311df7110266ccfed7f5b0657b24f72a1fe44e28 · naoyashiga/dataViz-playground
Reference
이 문제에 관하여(d3.js version4로 간단한 트리 다이어그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/naoyashiga/items/f1c53a739e40e3ef4fc0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
{
"name": "都営地下鉄",
"parent": "null",
"children": [
{
"name": "大江戸線",
"parent": "都営地下鉄",
"children": [
{
"name": "青山一丁目",
"parent": "大江戸線"
},
{
"name": "六本木",
"parent": "大江戸線"
}
]
},
{
"name": "浅草線",
"parent": "都営地下鉄"
}
]
}
js
본 기사에서는 코드를 일부 발췌하여 게재하고 있습니다. 자세한 내용은 모든 코드을 참조하십시오.
SVG 만들기
Visualization.js
d3.select('body').append('svg')
.attr('width', this.width)
.attr('height', this.height)
.append("g")
.attr("transform", "translate(" + this.margin.left + "," + (this.margin.top) + ")");
Tree 만들기
Visualization.js
this.margin = {top: 50, right: 0, bottom: 0, left: 200};
this.width = window.innerWidth - this.margin.left - this.margin.right,
this.height = window.innerHeight - this.margin.top - this.margin.bottom;
this.tree = d3.tree()
.size([this.height, this.width - 400]);
json 로드
Visualization.js
d3.json("datasets/data.json", (error, data) => {
this.root = d3.hierarchy(data);
this.tree(this.root);
});
hierarchy 함수를 사용합니다.
d3/d3-hierarchy: 2D layout algorithms for visualizing hierarchical data.
선으로 연결
Visualization.js
this.svg.selectAll(".link")
.data(this.root.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.y + d.parent.y) / 2 + "," + d.x
+ " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});
Node 만들기
Visualization.js
this.svg.selectAll(".node")
.data(this.root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
원 표시
Visualization.js
this.node.append("circle")
.attr("r", 2.5);
역명 표시
text를 추가합니다.
Visualization.js
this.node.append("text")
.attr("dy", 3)
.attr("x", function(d) { return d.children ? -8 : 8; })
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.data.name; });
CSS
dataViz-playground/main.css at 311df7110266ccfed7f5b0657b24f72a1fe44e28 · naoyashiga/dataViz-playground
Reference
이 문제에 관하여(d3.js version4로 간단한 트리 다이어그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/naoyashiga/items/f1c53a739e40e3ef4fc0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)