如何操作d3氣泡圖中的圓圈？

對不起，愚蠢的問題，我只是一個窮D3新手...如何操作d3氣泡圖中的圓圈？

我有以下demo bubble diagram上的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){ 
 
    \t \t var circle = svg.select("circle"); 
 
    \t \t circle.attr("value", function(d) { 
 
    \t \t \t d.value += 1; 
 
    \t \t \t return d.value; 
 
    \t \t }); 
 
    \t \t circle.attr("r", function(d) { 
 
    \t \t \t d.r += 1.0; 
 
    \t \t \t return d.r; 
 
    \t \t }); 
 
     }); 
 
// }); 
 

 
// 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包佈局？

來源

2015-08-28 matteo rulli

首先，您必須記住，在事件處理程序中，this綁定到當前的DOM元素（出錯的情況 - <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 }); 
});

請注意在此使用key function以將已更新的數據與已存在的圈正確綁定。您使用的值必須對所有圈子都是唯一的。我在這裏使用了className，但是如果它不是唯一的，你必須使用某種Id。

這裏已更新jsFiddle

來源

2015-08-28 11:11:03 eagor

那麼，完美！我真的很感激。 –

如何操作d3氣泡圖中的圓圈？

回答

相關問題