Question

我正在尝试创建一个非常基本的面向对象的结构来创建D3图表。这是Immediately invoked function expressions。

没有类和函数，相同的代码工作正常并构建了图表。但是，当我以上述方式对其进行整理时，值this.width和this.height会转换为SVGAnimatedLength，因此我无法对它们执行常规操作（例如this.height - yScale(x) }）。

我注意到，在遇到添加列的代码之前，this.width和this.height仍为数字。

this.chart.selectAll(".bar") ...

要重现，如果你设置一个断点并调试上面的变量，它们会显示为数字，直到执行上面的代码（第38行）。然后突然，他们变成了SVGAnimatedLength。

感谢任何帮助。谢谢。

Answer 1

this的值在函数内发生了变化。

所以不要在第38行：

 this.chart.selectAll(".bar")
            .data(this.data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return xScale(d.letter); })
            .attr("width", xScale.rangeBand())
            .attr("y", function(d) { return yScale(d.frequency); })
            .attr("height", function(d) {
                return this.height - yScale(d.frequency);//value of this is diffrent.
            });

这样做：

var me = this;//store the value of this in me.
        this.chart.selectAll(".bar")
            .data(this.data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return xScale(d.letter); })
            .attr("width", xScale.rangeBand())
            .attr("y", function(d) { return yScale(d.frequency); })
            .attr("height", function(d) {
                return me.height - yScale(d.frequency);//use me variable
            });
    } 
}

工作代码here

数字转换为SVGAnimatedLenght

1 个答案: