Question

我正在实施包含大量积分的折线图。我目前配置了hover / tooltip：

struct TR_EVT {
    Dest* pQDest;
    pthread_cond_t evWait;
    pthread_mutex_t mutex_tr;
    int thread_A_can_run;
};

threadA()
{
    TR_EVT TrEvt ;
    pthread_cond_init(&TrEvt.evWait, NULL);
    TrEvt.thread_A_can_run = 0;
    dSet->setContext(&TrEvt); 

    /* ... */

    cout << "Entering Sleep\n" ;
    pthread_mutex_lock(&TrEvt.mutex_tr);
    while (!TrEvt.thread_A_can_run)
        pthread_cond_wait(&TrEvt.evWait, &TrEvt.mutex_tr);
    pthread_mutex_unlock(&TrEvt.mutex_tr);
    cout << "Out of Sleep\n" ;
}

threadB()
{
    TR_EVT * pTrEvt = NULL ;  
    pTrEvt = (TR_EVT *)dSet->getContext() 

    /* ... */

    cout << "Signalling...\n"  ; 
    pthread_mutex_lock(&(pTrEvt->mutex_tr));
    pTrEvt->thread_A_can_run = 1;
    pthread_cond_signal(&(pTrEvt->evWait); //wake up thread A
    pthread_mutex_unlock(&(pTrEvt->mutex_tr));

    /* ... */
}

通过这种实现，每当我移动鼠标时工具提示出现+消失，如果我快速移动鼠标，这可能会分散注意力。当鼠标悬停在绘图区域上时，有没有办法确保工具提示从不消失？

具体来说，如果我的光标位于A点，我希望点A的工具提示可见。当我将光标移向B点时，我希望点A的工具提示保持可见，直到我到达B点的中途，此时我想要工具提示跳到B点。

实现这一目标的最佳方法是什么？

Answer 1

当您进入绘图区域并显示该点的工具提示时，您可能希望找到鼠标的最近点。

我建议你阅读this great post，它很好地解释了如何制作出色的工具提示。上面的帖子没有显示任何关于点的文字，但逻辑与你想要做的完全相同。关键的代码是：

// append the rectangle to capture mouse               
    svg.append("rect")                                     
        .attr("width", width)                              
        .attr("height", height)                            
        .style("fill", "none")                             
        .style("pointer-events", "all")                    
        .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);                       

    function mousemove() {                                 
        var x0 = x.invert(d3.mouse(this)[0]),              
            i = bisectDate(data, x0, 1),                   
            d0 = data[i - 1],                              
            d1 = data[i],                                  
            d = x0 - d0.date > d1.date - x0 ? d1 : d0;

        //you may want to change that to select a text area rather than a circle - whatever object is your tooltip in your code
        focus.select("circle.y")                           
            .attr("transform",                             
                  "translate(" + x(d.date) + "," +         
                                 y(d.close) + ")");        
    }

如何确保工具提示永远不会在悬停时消失

1 个答案: