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()挂钩中。

vue和d3强制布局，网络可视化

1 个答案: