Javascript D3基于类更改单击时节点的可见性

我有一个气泡图，其中节点声明如下，我为每个圆附加一个类，该类由决定其类别的数组类别决定，变量颜色为d3.scale.category10.domaind3.rangenumber of elements in category array

 var node = svg.selectAll("circle")
        .data(nodes)
        .enter().append("circle")
        .attr("class", function(d) {return category[d.cluster];})
        .text(function(d) { return d.text; })
        .filter(function(d){ return d.count >= 1; })
        .style("fill", function(d) { return color(d.cluster); })
        .call(force.drag);

接下来，我制作一个图例，它取决于每个圆圈的类别及其颜色，如上图所示。为此，我做了以下工作

 var legend = svg.selectAll(".legend")
        .data(color.domain())
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

 legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color)

 legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(d) { return category[d]; })

现在，我想要的是，当用户单击图例文本时，对应于图例类别的气泡将被隐藏

因此，我将以下内容添加到图例文本对象中

.on("click", function(d){
            node.selectAll('.'+category[d]).style("visibility", "hidden");
            });

---

但是，这并不隐藏节点。请提供帮助。

当您调用node.selectAll时，它将选择此节点中适合该选择器的所有子节点。在您的情况下，您希望在文档中调用它。因此，您必须执行类似d3.selectAll'.+category[d]

的操作，才能使JSFIDLE工作。非常感谢！