在D3中僅選擇一個json對象

Question

我是d3.js的新手，目前正在研究交互式氣泡圖並根據需要進行修改。我正在處理的氣泡圖如下所示

http://sunsp.net/demo/BubbleMenu/

源代碼和json文件

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

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

在此代碼中，我希望僅按名稱選擇2個氣泡。說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;

Answer 1

對於每個項目，根據其名稱將其樣式可見性屬性設置為“ 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"
        })

Answer 2

要將選擇內容過濾為特定項目，請使用selection.filter(selector)方法：

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