在工具提示中添加按钮


Add button in a tooltip

目前,我正在使用这个服务器监控:

http://bl.ocks.org/d3noob/9692795

问题是,我不知道如何在工具提示中添加按钮(开始,停止)

我已经完成了d3js工具提示doc:

http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

但是不能这样做。有谁能帮帮我吗?

当前代码:

// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
        return "translate(" + source.y0 + "," + source.x0 + ")"; })
            .on("click", click)
            // add tool tip for ps -eo pid,ppid,pcpu,size,comm,ruser,s
            .on("mouseover", function(d) {
                div.transition()
                    .duration(200)
                    .style("opacity", .9);
                    div .html(
                        "PID: " + d.name + "<br/>" + 
                        "Command: " + d.COMMAND + "<br/>" +
                        "User: " + d.RUSER + "<br/>" +
                        "%CPU: " + d.CPU + "<br/>" +
                        "Memory: " + d.SIZE
                    )
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
            })
            .on("mouseout", function(d) {
                div.transition()
                    .duration(500)
                    .style("opacity", 0);
            });

问题是工具提示不响应鼠标事件(CSS中的pointer-events: none;)。这样做是为了避免在工具提示出现在节点上方时立即触发节点上的mouseout事件。(通常,顶部的元素将通过关闭指针事件来捕获鼠标事件,鼠标移动将传递给下面的元素)。

如果你想让工具提示与按钮或链接交互,你需要删除该CSS行,并找出另一种关闭/隐藏工具提示的方法。例如,当鼠标移出工具提示<div>时,您可以隐藏工具提示,或者您可以在工具提示上添加一个专用的关闭按钮。