VUE.JS 将数据传递给 D3 - 做对了吗？

Posted 2023-02-22

【中文标题】VUE.JS 将数据传递给 D3 - 做对了吗？

【英文标题】：VUE.JS passing data to D3 - doing it right?

【发布时间】：2015-09-25 18:35:27

【问题描述】：

使用 vue.js 0.12。寻找将数据绑定到 d3 的最佳方法。在示例中，[materials] 最终保存了生成数据 D3 绘图的参数，这些数据使用 D3 绘制为不同的系列。我使用 vue 来管理用于生成数据的参数的输入/删除/编辑，并将这些参数传递给生成数据的函数，然后调用 D3 在指定的标签上绘图。

这行得通。我只是不知道我做得对不对。目前我正在做以下事情：

var test = new Vue(
  el: '#materials',

  data: 
    materials: [],
  ,


  ready: function() 
    this.$watch("materials", function(value) 

      // do some parsing and pass to D3

      rock.test(JSON.parse(JSON.stringify(this.materials)));
      

    );
  ,

// rest of vue commands 

////////////////////////////////////////////////

// D3 plotting

(function(exports) 

// all my D3 code for handling the passed object from vue 
// exports.test takes the parameters passed from vue, converts them into 
// the data I want to plot, and calls D3 to plot multiple series 


)(this.rock = );

我正在使用 ready 函数来观察 vue 模型何时更新为要绘制的新系列，然后将数据对象传递给 D3。这是正确的方法，还是有更好的方法？缺点是我必须使用 vue.js 来跟踪数据的更新并重新绘制 D3 图表。如果我使用 D3 以交互方式处理从图表中删除数据，在我的用例中，我与 vue 模型不同步（不确定如何将 D3 链接到 vue 数据模型）。​​

建议绝对赞赏。

【参考方案1】：

当我不得不创建一个嵌入了 d3 图的 vue 组件时，我所有的数据变量都以 _（下划线）开头，所以它们可以是普通的 d3 对象，没有 vue setter 和 getter：

https://github.com/jardimin/hipervideo/blob/master/app/vue/components/sidebar-graph.vue#L107

此链接中对此进行了说明： http://vuejs.org/api/options.html#data

在底层，Vue.js 附加了一个隐藏属性 __ob__ 并递归地将对象的可枚举属性转换为 getter 和 setter 以启用依赖项收集。键以$ 或_ 开头的属性将被跳过。

我认为您需要正好相反，才能获得双向链接，但也许这些信息会有所帮助。

【讨论】：

感谢您的帮助。我会停下来看看我能不能让它工作。