Vue и D3 Force макет, визуализация сети - PullRequest
Новая
       12

Vue и D3 Force макет, визуализация сети

0 голосов
/ 19 марта 2019

Итак, я новичок в d3 и очень мало экспериментировал с vue.

То, что я хочу сделать, это построить график сети после того, как данные были извлечены в компоненте vue.

Я попытался воссоздать некоторые из старых кодов о макете vue и d3 force и попытался адаптировать этот пример , но ни один из них не сработал, и я не знаю, почему.

Самое близкое к тому, что я хочу, - это, вероятно, ответ , но я хочу, чтобы он составил график после того, как данные были получены.

Мой код выглядит следующим образом: 

<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 warn]: недопустимое значение для параметра «вычислено»: ожидается объект, но получил функцию.

1 Ответ

0 голосов
/ 09 июля 2019

В computed() вы определяете переменные, которые обновляют DOM во время выполнения, вызывая там метод, не назначая возвращаемое значение или объект переменной, неправильно.Вместо этого попробуйте переместить this.data_vis() в mounted().

...