如何从 vue.js 方法渲染 d3.js 图表（传递目标 div）？

Question

  我的基本 vue 代码如下所示：

new Vue({

    el : '#friendlist',

    data : {

        friends : []

    },

    methods : {

        fetchStats : function(){

            const axios_data = {

                _token  : $('meta[name="csrf-token"]').attr('content')

            };

            axios.post('/friend-stats/all', axios_data).then(response => {

                this.friends = response.data;

            });

        }

    },

    mounted : function(){

        this.fetchStats();

    },

现在，对于数组friend中的每个friends，我需要渲染一个 d3.js 图表。我在另一个 JS 文件中有一个可以正常工作的方法，它被称为create_spider_chart(friend, target). 该friend变量包含来自我们上面的 vue 组件的朋友数组的成员，并且target是图表应该附加到的目标元素。这就是问题出现的地方。

如果我在 axios 调用的响应中这样做：

this.friends = response.data.data;

let target;

for(let i=0;i<this.friends.length;i++){

     target = '.spider-graphic-mini[data-id="'+this.friends[i].id+'"]';

     create_spider_chart(this.friends[i], target);   //d3.js

}

该元素.spider-graphic-mini[data-id="'+this.friends[i].id+'"]确实存在于 HTML 中：

<template v-for="(friend,key) in friends">

     <div class="col-md-6 friend-panel p-3">

          <h5>@{{ friend.name }}</h5>

          <div class="spider-graphic-mini mb-4" :data-id="friend.id"></div>

     </div>

</template>

但是，当我将该标识符传递给create_spider_chart函数时，该元素显然不存在。如此$(target)，length=0函数不知道在哪里创建图表。

我该如何解决这个问题？

Answer 1

从来没有用过 d3 所以把这个和一粒盐一起吃。JS 是单线程的，Vue DOM 更新过程是异步的。在您将内容分配到friends数组中的那一刻，Vue 还没有机会使用新数据呈现您的模板。这就是为什么您的元素还不存在的原因。您需要做的是使用$nextTick(callback)to 直到 Vue 重新渲染您的模板并根据回调中元素的存在来运行所有代码。这篇文档解释了它......