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

Question

我正在尝试在 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;

  }

Answer 1

d3.schemeCategory20未定义。它已在5.0.0中删除。从发行说明：删除 d3.schemeCategory20* 分类配色方案。D3 现在包括来自 ColorBrewer 的新分类配色方案，以及 ColorBrewer 出色的发散、顺序单色调和顺序多色调配色方案。删除了二十种配色方案，因为它们的分组设计经常错误地暗示数据中不存在的关系：共享色调可能暗示编码数据是一组（超类别）的一部分，而相对亮度可能错误地暗示命令。