Question

我正在使用d3 force layout for freetime。此时，我创建了一个代码，我可以在其中单击节点并弹出工具提示并返回节点的名称，这些节点位于其中。我的下一步是，我想让工具提示向我显示一个计数器，它返回工具提示中的计数数字，点击了多少个节点。但目前我不知道如何解决这个问题。希望你们中的某些人可以帮助我。非常感谢！

var node = svg.selectAll(".node")
              .data(nodes)
              .enter().append("g")
              .attr("class", "node")
              .call(force.drag);

node.append("circle")
    .attr("r", 19)
    .style("fill", "grey") 
    .on("click", showTooltip);        

function showTooltip(d)
{
  tooltip.text(d.name);
  tooltip.style("visibility", "visible"); 
}

var tooltip = d3.select("body")
                .append("div") 
                .attr("class", "tooltip")
                .style("position", "absolute")
                .style("z-index", "10")
                .style("visibility", "hidden");

Answer 1

您只需要在每次单击节点时递增的变量。

(function startlights(){

            socket.on('emergency', function(msg){   // I need to exit //startLights function when 'emergency' event occurs
               console.log("mayhem  "+msg);
            });


            setTimeout(function(){
                r1.css("background-color", "black");
                g1.css("background-color","green");
                r4.css("background-color", "red");
                y4.css("background-color","black");
            },1000);
            setTimeout(function(){
                g1.css("background-color","black");
                y1.css("background-color","yellow");
            },5000);
            setTimeout(function(){
                r1.css("background-color", "red");
                y1.css("background-color","black");
                r2.css("background-color", "black");
                g2.css("background-color","green");
            },6000);
            setTimeout(function(){
                y2.css("background-color","yellow");
                g2.css("background-color","black");
            },10000);
            setTimeout(function(){
                y2.css("background-color","black");
                r2.css("background-color", "red");
                g3.css("background-color","green");
                r3.css("background-color", "black");
            },11000);
            setTimeout(function(){
                y3.css("background-color","yellow");
                g3.css("background-color", "black");
                
            },15000);
            setTimeout(function(){
                y3.css("background-color","black");
                r3.css("background-color", "red");
                g4.css("background-color","green");
                r4.css("background-color", "black");
            },16000);
            setTimeout(function(){
                y4.css("background-color","yellow");
                g4.css("background-color", "black");
            },20000);

       }());

      var repeatLights = setInterval(startlights,20000);

如何计算点击的节点数？

1 个答案: