我正在创建财富 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/显示我的问题。