javascript - 醉醺醺的工具提示中的长文本

Question

我很高兴在我的 d3.js 图表中使用了 Tipsy，但现在我注意到如果太长，tipsy 会切断文本。

例如，包含单词CALCULATOR的行被截断：

有没有办法根据工具提示文本的最长行来扩展工具提示的宽度或自动调整它的大小（我在文档中没有找到任何内容）？

Answer 1

我最终为 D3 编写了自己的工具提示模块（见下文）。它使用require.js。我这样使用它：

define('myD3module',
// This module depends on the following modules
['tooltips', 'd3'], 
    function (tooltips, d3){

// Code omitted...

var node = svg.selectAll('g.node');
var nodeEnter = node.enter().append('g')
.on('mouseover', onMouseOver)                  
.on('mouseout', onMouseOut);

// Code omitted...

var onMouseOver = function(d){
       tooltips.showTooltip(d, getTooltipText);
};

var onMouseOut = function(d){
        tooltips.hideTooltip(d);
};

// Code omitted...
var getTooltipText = function(d){
    var tipText = '';
    var name = d.name;
    if(typeof name != 'undefined'){
        tipText += 'Name = ' + name + '<br>';
    }
    return tipText;
};

这是模块。

// This module shows tooltips near the user's cursor. The text of the tooltip must be provided by the consumer of this module. This module can be used with require.js.
define('tooltips',
// Required modules:
['d3','jquery'],
function (d3, $){

    // Contains the tooltip. This div will be repositioned as needed.
    var tooltip = d3.select('body').append('div')   
                    .attr('class', 'tooltip')               
                    .style('opacity', 0);

    // This CSS styles the tooltip
    var css = './config/tooltip.css';
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = css;
    document.getElementsByTagName('head')[0].appendChild(link);

    var hideTooltip = function (d) {       
            tooltip.style('opacity', 0);   
        },

        /** Show the tooltip. The text is defined by a function and the element the mouse cursor is placed on. */
        showTooltip = function (elem, getTooltipText){      
            tooltip.style('opacity', 0.9);      
            var text = getTooltipText(elem);
            var tipWidth = getTooltipWidth(text);
            // Draw the tips below the mouse cursor
            var tipYpos = d3.event.pageY + 20;
            tooltip.html(text)  
                // The tooltip is centered below the cursor
                .style('left', (d3.event.pageX - tipWidth/2) + 'px')     
                .style('top', tipYpos + 'px')
                .style('width', tipWidth + 'px')
                .style('height', getTooltipHeight(text) + 'px');
        },

        /**
         * The tooltip spans all the text's lines vertically.
         */
         getTooltipHeight = function (text) {

            var totalHeight = 0;
            var lines = text.split('<br>');
            for (var i = 0; i < lines.length; i++){
                var line = $.trim(lines[i]);
                // Ignore empty strings
                if(line.length > 0){
                    var span = document.createElement('span');
                    span.innerHTML = line;
                    $('body').append(span);
                    totalHeight +=  $(span).height();
                    $(span).remove();
                }
            }
            return totalHeight;
        },

        /*
         * The width of the tooltip is the width of the longest line in the tooltip text
         */
        getTooltipWidth = function (text){

            var lines = text.split('<br>');
            // Append a dummy span containing the current line to the DOM. The browser calculates the width of that span
            var maxWidth = d3.max(lines, function(line) {
                    var span = document.createElement('span');
                    span.innerHTML = line;
                    $('body').append(span);
                    var spanWidth = $(span).width();
                    $(span).remove();
                    return spanWidth; 
                    });
            return maxWidth;
        };

        // These functions are public
        return {
            showTooltip: showTooltip,
            hideTooltip: hideTooltip
        };
    }
);

这是 tooltip.css：

.tooltip {   
    position: absolute;           
    text-align: center;           
    font: 12px sans-serif;        
    background-color: rgb(95,230,245);   
    border-radius: 2px;           
    pointer-events: none;         
}