0

I am making a timeline sort of project. As of right now, my code looks like the following:

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 + ")";
    });
});
});

As of right now, the text, or labelsconstantly 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 labels

twario
  • 49
  • 2
  • 11

0 Answers0