javascript - d3 tooltip | passing in a variable -

i have webpage 4 d3 charts each of 11 different regions. 1 of charts area chart , code snippet is:

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;})); } 

i want add tooltips charts. in area plot, each region has different products. have 7 products, others have 5. need use mm variable @ runtime values (0-10) call correct product array conssubproducts currently. (conssubproducts set different product array @ top of for...loop, mm, code can see finally-set array , not runtime arrays.)

in code, mm returns 11, i.e. returns final value of mm rather values @ runtime.

i have tried passing mm in within tooltip() , within .text(function(d,i,mm) - latter doesn't work it's expecting j. i've tried attaching mm class or id of object, within call() console.log(this) logs object.window.

i've tried modifying tooltip.js although can generate label want can't work out how override text. 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 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 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 text, change according 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; }; 

any appreciated!

it looks way on top super simple. unless i'm missing something. let me post code how handle tooltips. predefine tooltip div in page html , class .tooltip , apply css of display:none; position:absolute; , add .tooltip.show{display:block;}

var tooltip = d3.select('.tooltip'); function tipupdate(d,i) {  tooltip.classed('show',true).html(d+" : "+i); }  areas.append('path')  //all 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"); }); 

this show tooltip div on mouseover of path , move tooltip relative it's position in body , hide tooltip when mouse leaves path. display data , index of point in path over. might want change should easy.

one problem thought later cannot working tooltip on path. show data last point in path. have posted working fiddle. d3 tooltip