0
d3 js를 사용하여 Zoomable TreeMap을 작성하려고합니다. 서버에서 JSON 객체 배열을 가져 와서 treeMap에 전달하여 트리 맵에서 처리하도록해야합니다. 내가 저장된 CSV 파일에서 데이터를로드하는 경우csv 파일에서 읽을 수없는 json 객체를 사용하여 트리 맵 입력 받기
$rootScope.loadTreeMap = function(path_to_data,dom_element_to_append_to){
var w = $(dom_element_to_append_to).width() - 80,
h = 800 - 180,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([0, h]),
color = d3.scale.category20c(),
root,
node;
console.log("W" + w);
console.log("h " + h);
var treemap = d3.layout.treemap()
.round(false)
.size([w, h])
.sticky(true)
.value(function(d) { return d.size; });
var svg = d3.select(dom_element_to_append_to).append("div")
.attr("class", "chart")
.style("width", w + "px")
.style("height", h + "px")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(.5,.5)");
d3.json(path_to_data, function(data) {
node = root = data;
var nodes = treemap.nodes(root)
.filter(function(d) { return !d.children; });
var cell = svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
cell.append("svg:rect")
.attr("width", function(d) { return d.dx - 1; })
.attr("height", function(d) { return d.dy - 1; })
.style("fill", function(d) { return color(d.parent.name); });
cell.append("svg:text")
.attr("x", function(d) { return d.dx/2; })
.attr("y", function(d) { return d.dy/2; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; })
.style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; });
d3.select(window).on("click", function() { zoom(root); });
d3.select("select").on("change", function() {
treemap.value(this.value == "size" ? size : count).nodes(root);
zoom(node);
});
});
function size(d) {
return d.size;
}
function count(d) {
return 1;
}
function zoom(d) {
var kx = w/d.dx, ky = h/d.dy;
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, d.y + d.dy]);
var t = svg.selectAll("g.cell").transition()
.duration(d3.event.altKey ? 7500 : 750)
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
t.select("rect")
.attr("width", function(d) { return kx * d.dx - 1; })
.attr("height", function(d) { return ky * d.dy - 1; })
t.select("text")
.attr("x", function(d) { return kx * d.dx/2; })
.attr("y", function(d) { return ky * d.dy/2; })
.style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; });
node = d;
d3.event.stopPropagation();
}
}
`
그것이 잘 작동 :하지만 그렇게 나는
가 여기에 tremap 내 코드의 IT를 구문 분석 할 수 아니에요 내 시스템에서,하지만 서버에서 객체의 배열을 읽고 그 위에 그래프를 만들고 싶습니다.
은 기본적으로 여기에 파일에서 읽고 JSON 개체를 구문 분석 내 함수의 :
d3.json(path_to_data, function(data) {
/*console.log("data");
console.log(data);
console.log("data");
data = JSON.parse(inputData);
console.log(data);*/
node = root = data;
var nodes = treemap.nodes(root)
.filter(function(d) { return !d.children; });
var cell = svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
cell.append("svg:rect")
.attr("width", function(d) { return d.dx - 1; })
.attr("height", function(d) { return d.dy - 1; })
.style("fill", function(d) { return color(d.parent.name); });
cell.append("svg:text")
.attr("x", function(d) { return d.dx/2; })
.attr("y", function(d) { return d.dy/2; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; })
.style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; });
d3.select(window).on("click", function() { zoom(root); });
d3.select("select").on("change", function() {
treemap.value(this.value == "size" ? size : count).nodes(root);
zoom(node);
});
});
을하지만 난 단지를 제거하려면이에 대한 해결책을 생각
node = root = inputdata ; here input data is array of json objects fetched from server
var nodes = treemap.nodes(root).filter(function(d) { return !d.children; });
var cell = svg.selectAll("g")