与 VueJS 和 Vuex 一起使用时，D3 append 不是一个函数答案

【问题标题】：D3 append is not a function when using with VueJS and Vuex与 VueJS 和 Vuex 一起使用时，D3 append 不是一个函数
【发布时间】：2018-07-20 13:57:39
【问题描述】：

我有一个 html 'div'，我正在尝试通过以下方式将另一个 div 附加到它：

var myDiv = d3.select("#container")    
myDiv.append("div")

我收到以下错误：

myDiv .append 不是函数

有什么想法吗？我正在使用 Vuex，所以我在商店中实例化了变量并尝试将其设置为 d3 选择。

我已经组装了一个类似于我所拥有的代码笔：https://codepen.io/anon/pen/oMBGmd?editors=1010

    const store = new Vuex.Store({
  state: {
    networkVariables: {
      node: "",
      data: [1, 2, 3, 4, 5]
    },
    container: ""
  },
  getters: {},
  mutations: {}
});

console.log("line 33");
console.log(store);

var networkVariables = store.state.networkVariables;
var container = store.state.container;
container = d3.select("#container");

console.log(networkVariables);

networkVariables.node = container
  .selectAll(".node")
  .data(networkVariables.data);

console.log(networkVariables.node);

networkVariables.nodeEnter = networkVariables.node.append("div");

【问题讨论】：

我无法重现。您可以创建一个正在运行的 sn-p，或者使用 JSFiddle 之类的网站重现该问题吗？
很可能没有 ID 为 divId 的标签。选择为空或未定义。使用调试器看看 myDiv 是什么？
@rioV8 不，不会出现上述错误。
问题是，我在我的代码中的其他地方有这个工作。发现很难复制。可能是数据问题，我检查了该元素是否存在。我知道这个问题很模糊，而且我没有例子很烦人，我只是想知道是否有人遇到了同样的事情
有一点需要注意，我使用的是 VueJs、webpack 和 Babel，可能这些有不一致的地方？

标签： javascript d3.js vue.js

【解决方案1】：

在您最新的 codepen 中，您提到的错误来自最后一行，您尝试直接附加到 networkVariable.node 而不使用 enter 选择。

当我将最后一行更改为：

networkVariables.nodeEnter = networkVariables.node.enter();
networkVariables.nodeEnter.append("div");

【讨论】：

虽然修复了错误，但并不等同于OP的代码。一般在更新选择上调用.append()是没有问题的。
是的，但在这种情况下，名为 node 和 data 的 networkVariables “属性”实际上是 Vue 框架中的 getter/setter 函数（看起来）——这就是为什么 d3 @ 987654326@ 方法不可用。既然他的代码似乎是从一个空页面开始并从数据中构建 DOM 元素，为什么不使用enter() 选择呢？
networkVariables.node 是 .data(...) 调用的返回值。这不是.select(...) 的结果。 exit() 组是一个空“列表”。

【解决方案2】：

这里networkVariables.nodeEnter = networkVariables.node.append("div");，networkVariables.node 对象中没有append()。我尝试用networkVariables.node[0].parentNode.append("div") 替换networkVariables.node.append()，这似乎在sn-p 中有效。你能试试这个改变吗？

【讨论】：

【解决方案3】：

codepen 中有错误的那一行就像@SteveR 注意到了最后一行。

不是d3.select() 的结果，而是d3.selectAll(..).data(...) 的结果。该数组包含 5 个empty 占位符和两个字段。这些是enter 和exit，这两个函数。要将其转换为“选择”结果，您必须先调用其中一个函数，然后才能append()。

但是在原始问题中，如果具有给定 id 的标签存在，则附加应该没有问题。

codepen 与原始问题/示例不同。

【讨论】：