如何解决javascript中的符号迭代器错误？

我正在尝试在vue中使用d3.js创建网络图

下面是代码

import * as d3 from "d3";


export default {
  name: "network",
  components: {},
  props: [],
  data() {
    return {
      graph: null,
    };
  },
  computed: {},
  created() {},
  mounted() {

    var canvas = d3.select("#network"),
    width = canvas.attr("width"),
    height = canvas.attr("height"),
    ctx = canvas.node().getContext("2d"),
    r = 3,
    color = d3.scaleOrdinal(d3.schemeCategory20),
    simulation = d3.forceSimulation()
      .force("x", d3.forceX(width/2))
      .force("y", d3.forceY(height/2))
      .force("collide", d3.forceCollide(r+1))
      .force("charge", d3.forceManyBody()
        .strength(-20))
      .force("link", d3.forceLink()
        .id(function (d) { return d.name; }));
  
  
  d3.json("VotacionesSenado2017.json", function (err, graph) {
    if (err) throw err;
  
    simulation.nodes(graph.nodes);
    simulation.force("link")
      .links(graph.links);
    simulation.on("tick", update);
  
    canvas
        .call(d3.drag()
            .container(canvas.node())
            .subject(dragsubject)
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));
  
    function update() {
      ctx.clearRect(0, 0, width, height);
  
      ctx.beginPath();
      ctx.globalAlpha = 0.1;
      ctx.strokeStyle = "#aaa";
      graph.links.forEach(drawLink);
      ctx.stroke();
  
  
      ctx.globalAlpha = 1.0;
      graph.nodes.forEach(drawNode);
    }
  
    function dragsubject() {
      return simulation.find(d3.event.x, d3.event.y);
    }
  
  });
  
  function dragstarted() {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d3.event.subject.fx = d3.event.subject.x;
    d3.event.subject.fy = d3.event.subject.y;
    console.log(d3.event.subject);
  }
  
  function dragged() {
    d3.event.subject.fx = d3.event.x;
    d3.event.subject.fy = d3.event.y;
  }
  
  function dragended() {
    if (!d3.event.active) simulation.alphaTarget(0);
    d3.event.subject.fx = null;
    d3.event.subject.fy = null;
  }
  
  
  
  function drawNode(d) {
    ctx.beginPath();
    ctx.fillStyle = color(d.party);
    ctx.moveTo(d.x, d.y);
    ctx.arc(d.x, d.y, r, 0, Math.PI*2);
    ctx.fill();
  }
  
  function drawLink(l) {
    ctx.moveTo(l.source.x, l.source.y);
    ctx.lineTo(l.target.x, l.target.y);
  }


   
  },
  methods: {},
};

这是html

  <canvas id="network" width="500" height="500"></canvas>

---

d3.SchemeCategory 20

未定义。它已在中删除。从发行说明中：

删除d3.schemeCategory20*类别颜色方案

D3现在包括来自ColorBrewer的新分类配色方案，以及ColorBrewer出色的发散、顺序单色调和顺序多色调配色方案。这二十种颜色方案被删除，因为它们的分组设计常常错误地暗示数据中不存在的关系：共享色调可能暗示编码数据是组（超级类别）的一部分，而相对亮度可能错误地暗示顺序

---

请使用所述的任何其他方案。

启动调试器，单步执行代码，您应该能够找到错误源。我尝试了。。。它没有出现。。我不确定。哦。。。伟大的谢谢至少你帮了忙。其他人都投了反对票……请你也回答这个问题：

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: "TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))"