Question

我按照本教程获取图表的工具提示：

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

它的工作就像一个魅力！

然而，有一个问题......

教程中显示的当前图表在行上有黑点......

我希望工具提示和黑点仅在我悬停在它们上时出现，而不是总是像它当前显示的那样。

有办法吗？

Answer 1

使用mouseout更新了答案： https://plnkr.co/edit/9Ej1MYpGqxBdeWO2FUNO?p=preview

.on("mouseover", function(d) {
// show circle selected
  d3.select(this)
    .transition()
          .duration(200)
    .style("opacity", 0.9);

.on('mouseout', function(d) {
    // hide the circle
    d3.select(this)
        .transition()
        .duration(100)
        .style("opacity", 0);
    // hide the tooltip
    d3.selectAll(".tooltip")
      .transition()
      .duration(100)
      .style("opacity",0);

要使用mouseout，您需要稍微向上移动工具提示，然后向下移动整个svg。

div.html(
    '<a href= "http://google.com">' + // The first <a> tag
    formatTime(d.date) +
    "</a>" +                          // closing </a> tag
    "<br/>"  + d.close)  
    .style("left", (d3.event.pageX) + "px")          
    .style("top", (d3.event.pageY - 42) + "px"); // up a bit
var margin = {top: 50, right: 20, bottom: 30, left: 50}, // down a bit

由于mouseout非常敏感，因此移开鼠标后圆圈会立即消失，因此最好稍微增加半径：

 svg.selectAll("dot")                                   
    .data(data)                                         
    .enter().append("circle")                               
    .attr("r", 8)   // slightly bigger for human reaction

不过，我认为没有mouseout是一种更好，更直观的方法：

旧的工作示例（加载需要几秒钟）：https://plnkr.co/edit/IitMgKW0jDYlWifokcZB?p=preview

您需要进行的更改位于.on("mouseover", function(d)，请添加以下代码：

    .on("mouseover", function(d) {
    // hide other circles
      d3.selectAll('circle')
        .style("opacity", 0);
    // show circle selected
      d3.select(this)
        .transition()
        .duration(200)
        .style("opacity", 0.9);

.on("mouseout", function(d)不适用于此情况，因为圆圈与工具提示重叠。

Answer 2

这是一个简单的d3工具提示，你可以查看代码！（这很少）

https://github.com/cbertelegni/tooltip_d3js/

function tooltipd3(tltp_name){

"use strict";

var s = {};
s.name = tltp_name ? tltp_name : "tooltipd3";
s.w = 0;    // width tooltip
s.h = 0;    // height tooltip

s.t = d3.select("body").append("div") // tooltip html node
    .attr("class", s.name)
    .style("opacity", 1e-6)
    .style("position", "absolute");

s.mouseover = function(html) {
    /** @param {string} html - Is the content for tooltip */
    s.t.html(html)
        .transition()
        .duration(300)
        .style("opacity", 1);

    /** After innerhtml on tooltip get w & h */
    s.get_t_size();
};

s.mousemove = function(){
    s.t.style("left", (d3.event.pageX - s.w/2) + "px")
        .style("top", (d3.event.pageY - s.h - 5) + "px")
        .style("opacity", 1);
};

s.mouseout = function() {
    s.t.transition()
        .duration(300)
        .style("opacity", 1e-6)
        .each("end", function(){
            s.t.html("");
        });
};

/** Get width and height of tooltip and set w & h of Tooltip class */
s.get_t_size = function(){
    var size = s.t.node().getBoundingClientRect();
    s.w = size.width;
    s.h= size.height;
};

return s;
}

Answer 3

正如Eric在评论中所说，这种方法并不完全是用户友好的。但是，如果你想要它，这里是：

首先，将圆圈的不透明度设置为0：

.attr("opacity", 0)

然后，在mousemove上：

.on("mouseover", function(d) {
  d3.select(this).attr("opacity", 1);
  div.transition()//the rest of the code

不要忘记创建鼠标以使其再次透明：

.on("mouseout", function(d) {
  d3.select(this).attr("opacity", 0);

关于悬停的D3.js工具提示

3 个答案: