如何用d3隐藏标签？

Question

我正在制作一个时间轴的项目。截至目前，我的代码如下所示：

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
.charge(-300)
.linkDistance(30)
.size([width, height]);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

d3.json("input.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();

var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); })
.style("visibility", function(d) {
                return d.value == 2 ? "hidden" : "visible";
              });

var node = svg.selectAll(".node")
              .data(graph.nodes)
              .enter().append("circle")
              .attr("class", "node")
              .attr("r", 20)
              .style("fill", function(d) { return color(d.group); })
              .call(force.drag)
              .style("visibility", function(d) {
                return d.group == 1 ? "hidden" : "visible";
              })
              .on("mouseover", function(d) {
                if(d.group == 2) {
                  node.filter(function(d) { return d.group == 1; }).style("visibility", "visible");
                  link.filter(function(d) { return d.value == 2; }).style("visibility", "visible");
                  texts.filter(function(d) { return d.value == 2; }).style("visibility", "visible");
                }
              }).on("mouseout", function(d) {
                if(d.group == 2) {
                  node.filter(function(d) { return d.group == 1; }).style("visibility", "hidden");
                  link.filter(function(d) { return d.value == 2; }).style("visibility", "hidden");
              }
            });

var texts = svg.selectAll("text.label")
                .data(graph.nodes)
                .enter().append("text")
                .attr("class", "label")
                .attr("fill", "black")
                .text(function(d) {  return d.name;  });

force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });

node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
texts.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
});
});

截至目前，即使节点和链接没有显示，文字或labels也会不断显示。我想知道我需要做什么？我不知道是否可以为labels

分配值或组