title: How to hide labels with d3?
body: <p>I am making a timeline sort of project. As of right now, my code looks like the following:</p>
  
  <pre><code>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 + ")";
      });
  });
  });
  </code></pre>
  
  <p>As of right now, the text, or <code>labels</code>constantly show, even when the nodes and links don't. I'm wondering what I need to do? I don't know if I can assign a value or group to the <code>labels</code></p>