this.textsize不是函数

发布于 2025-02-04 06:42:20 字数 1210 浏览 3 评论 0原文

我有这个错误：

uck offult（在承诺中）typeerror：this.textsize不是函数

如果我只是放置textsize，它告诉我它没有定义。

当它们位于另一个文件中的同一文件中时

textSize(text, classname="textDefault") {
        /* Get the size of the given text rendered in pixels.
        text : string
        output : dict
        */
        if (!d3) return;
        let container = d3.select("body")
            .append("svg");
        container.append("text")
            .attr("class", classname)
            .attr("x", -99999)
            .attr("y", -99999)
            .text(text);
        let size = container.node().getBBox();
        container.remove();
        return { "width": size.width, "height": size.height };
    },
    getYTickNumberWidth(dataValues, tickLabelFormat) {
        /* Get width for y tick number labels.
        dataValues : list/float
        tickLabelFormat : function
        output : float
        */

        return d3.max(dataValues.map(
            function(d) {
                console.log(this.textSize())
                let size = this.textSize(tickLabelFormat(d));
                return size.width;
            }
        ));
    },

原文

I have this error :

Uncaught (in promise) TypeError: this.textSize is not a function

for this.textSize if I just put textSize it tells me that it is not defined.

while they are in the same file one below the other

textSize(text, classname="textDefault") {
        /* Get the size of the given text rendered in pixels.
        text : string
        output : dict
        */
        if (!d3) return;
        let container = d3.select("body")
            .append("svg");
        container.append("text")
            .attr("class", classname)
            .attr("x", -99999)
            .attr("y", -99999)
            .text(text);
        let size = container.node().getBBox();
        container.remove();
        return { "width": size.width, "height": size.height };
    },
    getYTickNumberWidth(dataValues, tickLabelFormat) {
        /* Get width for y tick number labels.
        dataValues : list/float
        tickLabelFormat : function
        output : float
        */

        return d3.max(dataValues.map(
            function(d) {
                console.log(this.textSize())
                let size = this.textSize(tickLabelFormat(d));
                return size.width;
            }
        ));
    },

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千年*琉璃梦 2025-02-11 06:42:20

我认为问题在于您使用的是功能而不是箭头功能。
尝试以下操作：

    getYTickNumberWidth(dataValues, tickLabelFormat) {
    /* Get width for y tick number labels.
    dataValues : list/float
    tickLabelFormat : function
    output : float
    */

    return d3.max(dataValues.map(
        (d) => {
            console.log(this.textSize())
            let size = this.textSize(tickLabelFormat(d));
            return size.width;
        }
    ));
}

I think the problem is that you are using a function instead of an arrow function.
try this:

    getYTickNumberWidth(dataValues, tickLabelFormat) {
    /* Get width for y tick number labels.
    dataValues : list/float
    tickLabelFormat : function
    output : float
    */

    return d3.max(dataValues.map(
        (d) => {
            console.log(this.textSize())
            let size = this.textSize(tickLabelFormat(d));
            return size.width;
        }
    ));
}

回复收藏 0 原文

居里长安 2025-02-11 06:42:20

这里的问题是此的范围。当您使用常规函数Map 包含其自己的并尝试访问textsize的映射。

因此，您必须使用箭头函数，其中的值此在函数的整个生命周期中保持不变，并且始终绑定到this的值 - 箭头父函数。

演示：

new Vue({
  el: '#app',
  data: {
    items: []
  },
  methods: {
    textSize(item) {
        this.items.push(item)
    },
    getYTickNumberWidth() {
      this.items = [];
        /* [1, 2, 3].map(function(item) {   // ❌
                this.textSize(item);
              }); */
      
      [1, 2, 3].map((item) => {    // ✅
        this.textSize(item);
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="getYTickNumberWidth">
  Get Items
  </button>
  <pre>{{ items }}</pre>
</div>

Here issue is with the scope of this. As you are using regular function inside map which contains it's own this and trying to access textSize in it's own scope.

Hence, You have to use arrow function in which the value of this remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function.

Demo :

new Vue({
  el: '#app',
  data: {
    items: []
  },
  methods: {
    textSize(item) {
        this.items.push(item)
    },
    getYTickNumberWidth() {
      this.items = [];
        /* [1, 2, 3].map(function(item) {   // ❌
                this.textSize(item);
              }); */
      
      [1, 2, 3].map((item) => {    // ✅
        this.textSize(item);
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="getYTickNumberWidth">
  Get Items
  </button>
  <pre>{{ items }}</pre>
</div>

回复收藏 0 原文

~没有更多了~