어리석은 질문에 대해 죄송합니다. 저는 단지 가난한 d3 초보자입니다 ...
JSFiddle에 다음과 같은 데모 버블 다이어그램 이 있습니다. 제가 달성하려는 것은 원을 클릭 할 때마다 원의 반경을 늘리고 그에 따라 팩 레이아웃을 조정하는 것입니다.
편의를 위해 JSFiddle의 코드는 다음과 같습니다.
text {
font: 20px sans-serif;
}<!DOCTYPE html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var root = {
"name": "Root",
"children": [
{
"name": "Leaf One",
"children": null,
"size": 1
},
{
"name": "Leaf Two",
"children": null,
"size": 1
},
{
"name": "Leaf Three",
"children": null,
"size": 1
}
],
"size": 1
};
var diameter = 400,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
// not needed in JSfiddle, data is hard-coded:
// d3.json("data.json", function(error, root) {
// if (error) throw error;
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
node.on("click", function(e, i){
var circle = svg.select("circle");
circle.attr("value", function(d) {
d.value += 1;
return d.value;
});
circle.attr("r", function(d) {
d.r += 1.0;
return d.r;
});
});
// });
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>나는 node.on("click", ...)방법 을 통해 그것을 시도했지만 수정 된 원이 항상 첫 번째이기 때문에 어떻게 든 막혔습니다. 클릭 한 원을 선택하는 가장 좋은 방법은 무엇입니까?
또한 원 반경을 수정 한 후 d3 팩 레이아웃을 강제로 새로 고치려면 어떻게해야합니까?
먼저, 이벤트 핸들러 this에서는 현재 DOM 요소에 바인딩되어 있음을 기억해야합니다 (아웃 케이스-the <g>). 클릭 <g>하여 d3.select(this)를 선택한 다음 다음에서 원을 선택할 수 있습니다.
var circle = d3.select(this).select("circle");
(그냥 svg.select("circle")DOM의 첫 번째 원을 선택하면 항상 같은 원이됩니다)
레이아웃 을 새로 고치려면 기본 데이터를 업데이트하고, 레이아웃을 다시 계산하고, 데이터 결합을 다시 계산하고, 값을 업데이트해야합니다.
// store the underlying data in a value
var classedRoot = classes(root);
// ...your node creating code here
node.on("click", function(d) {
// update the data in classedRoot
d.value += 1;
// recalculate layout
var data = bubble.nodes(classedRoot);
// recompute data join
node.data(data, function(d) { return d.className; }) // use key function
// update values
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.select("circle")
.attr("r", function(d) { return d.r });
});
여기에서 키 기능을 사용하여 업데이트 된 데이터를 이미 존재하는 원과 적절하게 바인딩합니다. 사용하는 값은 모든 서클에 대해 고유해야합니다. 여기서는 className을 사용 했지만 고유하지 않은 경우 일종의 Id를 사용해야합니다.
여기에 업데이트 된 jsFiddle이 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다