Question

我是d3.js的新手，目前正致力于交互式气泡图并根据我的需要进行修改。我正在研究的气泡图如下：

源代码和json文件

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

在这段代码中，我希望只按名称选择2个气泡.Say 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)方法：

{{1}}

在D3中只选择一个json对象

2 个答案: