javascript - 与 VueJS 和 Vuex 一起使用时，D3 append 不是函数

Question

我有一个 html“div”，我正尝试通过以下方式向其附加另一个 div:

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

我得到以下错误:

myDiv .append is not a function

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

我整理了一个类似于我所拥有的代码笔: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");

Answer 1

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

当我将最后一行更改为:

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