Javascript D3js过滤器选择
我正在创建一个交互式的数据。我试图减少一个选择,但不明白为什么它不能像我期望的那样工作Javascript D3js过滤器选择,javascript,d3.js,filtering,circle-pack,Javascript,D3.js,Filtering,Circle Pack,我正在创建一个交互式的数据。我试图减少一个选择,但不明白为什么它不能像我期望的那样工作 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(
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"
},
....
}
我想删除父节点。我正在尝试使用一个过滤器函数,如所述
但是,如果我在初始化节点
选择的地方添加过滤函数,要么什么都没有发生,要么出现错误
(当我在追加文本之前应用过滤器时,过滤器工作)
我如何解决这个问题
更新:这是一个JSFIDLE,显示了我的问题
你的想法是对的。您只需要在创建圆的位置(以及创建文本的位置)应用过滤器:
分叉版本在上您可以过滤布局输出的数组:
var node = svg.data([fortune2009]).selectAll("g.node")
.data(function(d) {
return bubble.nodes(d).filter(function(v) {
return v.depth > 0;
});
});
查看更新的fiddle:一眼我猜您需要将过滤器放在
节点之间。enter()
和.append(“g”)
,但是运行示例需要花费的时间比我所花的时间要多,所以如果您能在JSFiddle上运行一些东西会有所帮助……谢谢@Richard。实际上,我在前面尝试过这个方法,但感觉它不是最佳的解决方案,因为创建了一个
。我相信在创建文本的地方可以避免使用过滤器,如果我只是更早地过滤所选内容……当我在节点中有多个子节点,并且每个节点都要用节点附加圆圈时,我应该怎么做?@AmitRana你可以发布一个单独的问题吗,这个问题的评论不是一个很好的媒介。如果你回复你的问题的链接,我很乐意尝试回答。谢谢@nautat。它解决了我的问题,但又制造了另一个问题。为什么第一个圆圈在我与图表交互时表现得很奇怪?你在交互函数中重新分配了数据,这很有趣。您还需要使用一个键函数来确保气泡对应于同一家公司,即使在重新调用数据数组之后也是如此。请参阅更新的小提琴:
node
.filter(function(d) { return !d.children; })
.append("circle")
.attr("r", function(d) { return d.r; });
var node = svg.data([fortune2009]).selectAll("g.node")
.data(function(d) {
return bubble.nodes(d).filter(function(v) {
return v.depth > 0;
});
});