Question

我有一个网页，其中包含11个不同地区的4个d3图表。其中一个图表是面积图，代码片段为：

for (mm=0; mm<regions.length; mm++) {

    areas.append("path")
        .attr("class",function(d,i){ return "area cons ar"+i+" region"+mm;} )
        .attr("id", function(d,i) { return "area_"+i+"_"+mm})
        .attr("d", function(d,i) { return area(d)} );

    var test = d3.selectAll("path.region"+mm)
    .call(d3.helper.tooltip()
        .attr("class", function(d, i) { return "tooltip"; })
        .text(function(d, i){ 

            console.log(mm);

            return "i "+consSubProducts[i]+', i: '+i;}));
}

我想在图表中添加工具提示。在该地区的情节中，每个地区都有不同的产品。有些产品有7个产品，有些有5个产品。我需要在运行时值（0-10）下使用mm变量来调用consSubProducts当前正确的产品数组。（ConsSubProducts设置为for ...循环顶部的不同产品数组，但与mm一样，代码只能看到最终设置的数组而不是运行时数组。）

在此代码中，mm始终返回11，即它返回mm的最终值，而不是运行时的值。

我试过在tooltip（）和.text（函数（d，i，mm）中传递mm - 后者显然不能正常工作，因为它期望j。我也尝试将mm附加到班级或对象的ID，但在call（）console.log（this）中记录object.window。

我已经尝试修改tooltip.js但是虽然我可以生成我想要的标签，但我无法弄清楚如何覆盖文本。 Tooltip.js：

d3.helper = {};

d3.helper.tooltip = function(){
    var tooltipDiv;
    var bodyNode = d3.select('body').node();
    var attrs = {};
    var text = '';
    var styles = {};

    function tooltip(selection){

        selection.on('mouseover.tooltip', function(pD, pI){
            var name, value;
            // Clean up lost tooltips
            d3.select('body').selectAll('div.tooltip').remove();
            // Append tooltip
            tooltipDiv = d3.select('body').append('div');
            tooltipDiv.attr(attrs);
            tooltipDiv.style(styles);
            var absoluteMousePos = d3.mouse(bodyNode);
            tooltipDiv.style({
                left: (absoluteMousePos[0] + 10)+'px',
                top: (absoluteMousePos[1] - 15)+'px',
                position: 'absolute',
                'z-index': 1001
            });
            // Add text using the accessor function, Crop text arbitrarily
            tooltipDiv.style('width', function(d, i){ return (text(pD, pI).length > 80) ? '300px' : null; })
                .html(function(d, i){return text(pD, pI);});
        })
        .on('mousemove.tooltip', function(pD, pI){
            // Move tooltip
            var absoluteMousePos = d3.mouse(bodyNode);
            tooltipDiv.style({
                left: (absoluteMousePos[0] + 10)+'px',
                top: (absoluteMousePos[1] - 15)+'px'
            });
            // Keep updating the text, it could change according to position
            tooltipDiv.html(function(d, i){ return text(pD, pI); });
        })
        .on('mouseout.tooltip', function(pD, pI){
            // Remove tooltip
            tooltipDiv.remove();
        });

    }

    tooltip.attr = function(_x){
        if (!arguments.length) return attrs;
        attrs = _x;
        return this;
    };

    tooltip.style = function(_x){
        if (!arguments.length) return styles;
        styles = _x;
        return this;
    };

    tooltip.text = function(_x){
        if (!arguments.length) return text;
        text = d3.functor(_x);
        return this;
    };

    return tooltip;
};

任何帮助表示赞赏！

Answer 1

看起来这是超级简单的事情。除非我错过了什么。让我发一些关于如何处理工具提示的代码。在页面HTML中预定义工具提示div并将其命名为.tooltip并应用display:none; position:absolute;的css并添加.tooltip.show{display:block;}

var tooltip = d3.select('.tooltip');
function tipUpdate(d,i) {
 tooltip.classed('show',true).html(d+" : "+i);
}

areas.append('path')
 //all your path attributs
 .on('mouseover', tipUpdate)
 .on('mouseout', function() { tooltip.classed('show',false); });

areas.on('mousemove', function(d,i) {
  var mouse = d3.mouse('body').map( function(d) { return parseInt(d); });
  tooltip.attr("style", "left:"+(mouse[0]+10)+"px;top:"+(mouse[1]-15)+"px");
});

这将显示路径鼠标悬停时的工具提示div，并相对于它在体内的位置移动工具提示，并在鼠标离开路径时隐藏工具提示。它将显示当前所在路径中的点的数据和索引。你可能想要改变它，但它应该很容易。

我后来想到的一个问题是你不能在路径上做这样的工作工具提示。它将始终显示路径中最后一点的数据。我发布了一个工作小提琴。 D3 tooltip

d3工具提示|传入变量

1 个答案: