我正在尝试在 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; }
1 回答
慕森卡
TA贡献1806条经验 获得超8个赞
d3.schemeCategory20
未定义。它已在5.0.0中删除。从发行说明:
删除 d3.schemeCategory20* 分类配色方案。
D3 现在包括来自 ColorBrewer 的新分类配色方案,以及 ColorBrewer 出色的发散、顺序单色调和顺序多色调配色方案。删除了二十种配色方案,因为它们的分组设计经常错误地暗示数据中不存在的关系:共享色调可能暗示编码数据是一组(超类别)的一部分,而相对亮度可能错误地暗示命令。
添加回答
举报
0/150
提交
取消