只选择一个JSON对象D3

我是新来d3.js和目前正在交互式气泡图上修改我的need.The气泡图我的工作是低于只选择一个JSON对象D3

来源代码和JSON文件

http://sunsp.net/code/main_bubble_json.html

在这段代码中，我想SE只有名字只有2个泡泡。At Atlas和Aglab只显示那两个，而不是全部4.我该怎么做？

我试过下面选择一个在一段时间，但力的工作。

 var bubbleObj = svg.selectAll(".topBubble") 
       .data(root.children[0]) 
      .enter().append("g") 
       .attr("id", function(d,i) {return "topBubbleAndText_" + i}); 

     console.log(bubbleObj);//bubble obj is null 


     // nTop = root.children.length; 
     nTop = 1;

来源

2016-01-31 TheLion

要过滤选择特定项目，使用selection.filter(selector)方法：

var desiredNames = ["Atlas", "Aglab"]; 
var itemsWithDesiredNames = selection.filter(function(d, i) { 
    return desiredNames.includes(d.name); 
});

来源

2016-01-31 01:36:24 sbecker

你能告诉我如何使用JSON使用..因为我无法适应这个在我的代码的任何地方 – TheLion

对不起，我不能，你应该努力一点，看看你能否得到它。 – sbecker

找到了..谢谢 – TheLion

对于每个项目的基础上，其名称中的风格可见性属性设置为visible或hidden。这里有一个例子：

.style("visibility", function(d) { 
     return ["Atlas", "Aglab"].includes(d.name) ? "visible" : "hidden" 
    })

为了把它放在一起：

// existing code to draw bubbles 
    bubbleObj.append("circle") 
     .attr("class", "topBubble") 
     .attr("id", function(d,i) {return "topBubble" + i;}) 
     .attr("r", function(d) { return oR; }) 
     .attr("cx", function(d, i) {return oR*(3*(1+i)-1);}) 
     .attr("cy", (h+oR)/3) 
     .style("fill", function(d,i) { return colVals(i); }) 

     // set bubble visibility based on name of data item 
     .style("visibility", function(d) { 
      return ["Atlas", "Aglab"].includes(d.name) ? "visible" : "hidden" 
     })

来源

2016-01-31 01:13:39 sbecker

谢谢，但不幸的是这只是改变能见度。如果我在我的json文件中有100个气泡对象，所有的气泡都会出现，但只有在可见的情况下..这使得每个气泡的大小变小。 – TheLion

见我就如何缩小选择使用selection.filter（第二个答案） – sbecker

只选择一个JSON对象D3

回答

相关问题