d3工具提示| 传入变量

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（function（d，i，mm）内传递mm-后者显然不起作用，因为它期望是j。我也尝试将mm附加到一个对象，但在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中预定义tooltip div并将其分类为.tooltip并应用display:none; position:absolute;的CSS display:none; position:absolute; display:none; position:absolute; 并添加.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工具提示