如何解决如何解决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中所述的任何其他方案。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。