[英]D3js filter selection
我正在創建一個財富500強數據的交互式氣泡圖 。 我試圖減少選擇,但無法弄清楚為什么它不像我期望的那樣工作。
var bubble = d3.layout.pack()
...
d3.json("js/data/fortune2009.json", function(json) {
var node = svg.data([json]).selectAll("g.node")
.data(bubble.nodes); // filter here?
node.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("r", function(d) { return d.r; })
.attr("class", function(d) { return "q" + color(d.Profit) + "-9"; });
node.filter(function(d) { return !d.children; })
.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.Company.substring(0, d.r / 3); });
});
JSON數據如下所示:
{
"children":[
{
"Year" : "2009",
"Rank" : "1",
"Revenue" : "442",
"Profit" : "851.00",
"Company" : "Exxon Mobil"
},
....
}
我想刪除父節點。 我試圖使用像這里描述的過濾功能。
.filter(function(d) { return !d.children; })
但是,如果我添加我的過濾器功能,我初始化node
選擇,或者沒有任何反應或我得到一個錯誤。
(在我附加文本之前應用它時,過濾器有效)
我該如何解決這個問題?
更新:這是一個JSFIDDLE http://jsfiddle.net/B9w4N/8/顯示我的問題。
您可以過濾布局輸出的數組:
var node = svg.data([fortune2009]).selectAll("g.node")
.data(function(d) {
return bubble.nodes(d).filter(function(v) {
return v.depth > 0;
});
});
看到更新的小提琴: http : //jsfiddle.net/B9w4N/10/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.