vue和d3力布局，网络可视化

Question

所以我是 d3 的新手，很少尝试使用 vue。

我要做的是在 vue 组件中获取数据后绘制网络图。

我尝试重新创建一些关于 vue 和 d3 强制布局的旧代码，并尝试修改 example，但没有一个成功，我真的不知道为什么。

我最接近我想要的可能是这个answer，但我希望它在获取数据后绘制图表。

我的代码现在看起来像这样：

<script>
  import * as d3 from "d3";
  export default {
    name: "MapComponent",
    data() {
      return {
        mapData: {}
      };
    },
    created() {
      this.mapdataget();
    },
    computed() {
      this.data_vis();
    },
    methods: {
      mapdataget: function () {
        this.$store
          .dispatch("mapData_get")
          .then(() => {
            this.mapData = this.$store.getters.mapData;
          })
          .catch();
      },
      data_vis() {
        let nodes = this.mapData.nodes;
        let links = this.mapData.links;
        let svg = d3.select("svg")
        this.simulation = d3.forceSimulation()
          .force("link", d3.forceLink().id(function (d) {
            return d.id;
          }))
          .force("charge", d3.forceManyBody())
        let link = svg.append("g")
          .attr("class", "links")
          .selectAll("line")
          .data(links) //graph.links)
          .enter().append("line")
          .attr("stroke-width", function (d) {
            return Math.sqrt(d.value);
          });
        let node = svg.append("g")
          .attr("class", "nodes")
          .selectAll("circle")
          .data(nodes) //graph.nodes)
          .enter().append("circle")
          .attr("r", 5)
          .call(d3.drag()
            .on("start", this.dragstarted)
            .on("drag", this.dragged)
            .on("end", this.dragended));
        node.append("title")
          .text(function (d) {
            return d.id;
          });
        this.simulation
          .nodes(nodes)
          .on("tick", ticked);
        this.simulation.force("link")
          .links(links); //graph.links);
        function ticked() {
          link
            .attr("x1", function (d) {
              return d.source.x;
            })
            .attr("y1", function (d) {
              return d.source.y;
            })
            .attr("x2", function (d) {
              return d.target.x;
            })
            .attr("y2", function (d) {
              return d.target.y;
            });
          node
            .attr("cx", function (d) {
              return d.x;
            })
            .attr("cy", function (d) {
              return d.y;
            });
        }
      }
    }
  }
</script>

mapData 看起来像这样：

const mapData = {
  'nodes': [{
    'id':String
    }, and more],
  'links': [{
    'id':String,
    'source': sourceNodeId,
    'target': targetNodeId
    }, and more]
  }

vue 模板是一个 svg：

<template>
  <svg class='svg'></svg>
</template>

我得到了一个错误：

[Vue 警告]：选项“计算”的值无效：需要一个对象， 但得到了函数。

Answer 1

在computed() 中，您定义了在运行时更新 DOM 的变量，在那里调用方法而不将返回值或对象分配给变量是错误的。您应该尝试将 this.data_vis() 移动到 mounted() 挂钩中。