只選擇一個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

回答

相關問題