Question

我有一个气泡图，其中节点声明如下，我为每个圆圈附加一个由数组（＆＃34;类别＆＃34;）决定的类，它决定了它的类别，变量颜色是d3。 scale.category10（）。domain（d3.range（＆＃34; category＆＃34; 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");
            });

但是，这并不会隐藏节点。请帮忙。

Answer 1

当您致电node.selectAll()时，它将选择适合选择器的此节点的所有子节点。在您的情况下，您想在文档上调用它。所以你必须做d3.selectAll('.'+category[d])

之类的事情

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

1 个答案: