Javascript Object's variables undefined -

i have created javascript object part of visualization working on, , funning issue object's instance variables. relevant code below:

function bubble() {         //don't use these functions elsewhere--only modify them change behavior             this.color;             this.bubblecircles = chart.selectall("circle");                 //.data(array,function(d){return d['date'];});              this.bubblecirclesenter = function(selection){                 selection.enter().append("circle")                     .style('stroke',this.color)                     .style('fill',this.color)                     .attr("cx", function (d, i) { return x(i); })                     .attr("cy", function (d) { return y(d["measure"]) - 1.5*bubbleradius; })                     .attr("r", 0);                     console.log(this.color);                 };              this.bubblecirclesentertransition = function(selection){                 return selection.transition()                     .duration(400)                     .delay(function(d,i){return i*segmentduration;})                     .ease('elastic')                     .attr("r", bubbleradius);                 };              this.bubbletext = chart.selectall('.label');                 //.data(array,function(d){return d['date'];});              this.bubbletextenter = function(selection){                 selection                     .enter().append("text")                     .attr("x", function (d, i) { return x(i) - (13.0/16)*bubblenumbersize; })                     .attr("y", function (d, i) { return y(d['measure']) - 1.5*bubbleradius + bubblenumbersize*(5.0/16); })                     .style("font-size", bubblenumbersize.tostring() + "px")                     .style('fill',white)                     .style('fill-opacity',1.0)                     .style('stroke',white)                     .style('stroke-opacity',1.0)                     .text(function (d, i) { return d['measure'].tofixed(2); });             };         //actually use these ones              this.enter = function() {                 this.bubblecircles = this.bubblecircles.call(this.bubblecirclesenter);                 this.bubbletext = this.bubbletext.call(this.bubbletextenter);             };              this.entertransition = function() {                 this.bubblecircles.call(this.bubblecirclesentertransition);             };              this.draw = function() {                 this.enter();                 this.entertransition();             };              this.setdata = function(dataset) {                 this.bubblecircles = this.bubblecircles.data(dataset,function(d){ return d['date']; });                 this.bubbletext = this.bubbletext.data(dataset,function(d){ return d['date']; });             };              this.setcolor = function(bubblescolor) {                 this.color = bubblescolor;             };         }; 

the problem this.color variable. gets set when 'setcolor' method called, but, later, when bubblecirclesenter called (via this.draw , this.enter), console.log of variable shows undefined.

if point out doing wrong, appreciate it!

this changes scope throughout object. when enter of functions, scope of this moves global scope local scope of function. i've seen done set new variable equal member. article explains in better words can: http://ryanmorr.com/understanding-scope-and-context-in-javascript/

function bubble() {     //don't use these functions elsewhere--only modify them change behavior         this.color;         this.bubblecircles = chart.selectall("circle");         var me = this; 

. . .

this.bubblecirclesenter = function(selection){             selection.enter().append("circle")                 .style('stroke',me.color)                 .style('fill',me.color)                 .attr("cx", function (d, i) { return x(i); })                 .attr("cy", function (d) { return y(d["measure"]) - 1.5*bubbleradius; })                 .attr("r", 0);                 console.log(me.color);             };