Question

目前，我正在使用它进行服务器监控：

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

Answer 1

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

如果您希望工具提示是交互式的，使用按钮或链接，则需要删除该CSS行并找出关闭/隐藏工具提示的不同方法。例如，您可以在工具提示<div>被剔除时隐藏工具提示，或者您可以在工具提示中添加专用的关闭按钮。

在工具提示中添加按钮

1 个答案: