2

我已经创建了一个 javascript 对象作为我正在处理的可视化的一部分，并且很有趣地遇到了对象的实例变量的问题。相关代码如下：

function bubble() {
        //don't use these functions elsewhere--only modify them to 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;
            };
        };

问题出在 this.color 变量上。它在调用“setColor”方法时被设置，但是，稍后，当调用bubbleCirclesEnter 时（通过this.draw 和this.enter），变量的console.log 显示它是未定义的。

如果有人能指出我做错了什么，我将不胜感激！

4

2 回答 2

3

this改变整个对象的范围。当您输入任何函数时，作用域this将从全局作用域移动到函数的局部作用域。一般来说，我所看到的是将一个与此相等的新变量设置为另一个成员。这篇文章用比我更好的语言解释：http ://ryanmorr.com/understanding-scope-and-context-in-javascript/

function bubble() {
    //don't use these functions elsewhere--only modify them to 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);
            };
于 2013-07-18T13:53:30.103 回答
-1

只是一个想法：

尝试在函数中声明颜色变量：

function bubble() {
        //don't use these functions elsewhere--only modify them to change behavior
            var color = "";
   //rest of the code
于 2013-07-18T13:41:23.200 回答