CODEWITHSUNDEEP
javascriptvue.jsd3.js
mx_code
mx_code

Reputation: 2527

How to resolve symbol iterator error in javascript?

I'm trying to create a network graph using d3.js in vue.

Following is the code for that.

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: {},
};

this is the html

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

The issue here is that it is throwing the following error:

enter image description here

I'm not sure why;

I tried debugging and found issue somewhere near canvas.node().getContext("2d") (not sure though).

this is the error message

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

Upvotes: 0

Views: 697

Answers (1)

Ruben Helsloot
Ruben Helsloot

Reputation: 13129

d3.schemeCategory20 is undefined. It has been removed in 5.0.0. From the release notes:

Remove d3.schemeCategory20* categorical color schemes.

D3 now includes new categorical color schemes from ColorBrewer, along with ColorBrewer’s excellent diverging, sequential single-hue and sequential multi-hue color schemes. The twenty-color schemes were removed because their grouped design often falsely implied non-existent relationships in the data: a shared hue can imply that the encoded data are part of a group (a super-category), while the relative lightness can falsely imply order.

Use any of the other schemes described here instead.

Upvotes: 2

Related Questions