如何解决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,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,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>

这里的问题是它引发了以下错误：

我不确定为什么；

我尝试调试，发现问题canvas.node().getContext("2d")附近（虽然不确定）。

这是错误消息

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))"

解决方法

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

删除d3.schemeCategory20 *分类配色方案。

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

请改用here中所述的任何其他方案。

javascript vue.js