目前,我正在使用这个服务器监控:
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>
时,您可以隐藏工具提示,或者您可以在工具提示上添加一个专用的关闭按钮。