挂载钩子中的错误："TypeError: edge是未定义的“当使用dagre-d3和vue2时

Question

我试图用Vue2建立一个非常简单的示例，使用dagre-d3来呈现有向图。不幸的是，即使有非常简单的例子，它也无法工作。在网上找到的例子是使用旧版本的Vue2。目前，Vue2应用程序大多是默认模板，带有一个以typescript为语言的路由器。Diagram组件在javascript中(由于我的d3和dagre-d3代码中缺少类型)。

当运行下面提到的组件时，会发生以下错误，<svg>块中没有显示任何内容。

Error in mounted hook: "TypeError: edge is undefined"

它发生在这条线上

render(container, g);

我唯一能想到的是，我可能遗漏了一些依赖项，或者所有组件都必须是类型记录。

帮助?

Diagram.vue：

<template>
  <div class="myback">
    <h1>This is a diagram component</h1>
    <svg>
      <g></g>
    </svg>
  </div>
</template>

<script>
import * as d3 from "d3";
import dagreD3 from "dagre-d3";

// let edges = {}
// let nodes = {}
// let g = new dagreD3.graphlib.Graph().setGraph({})

export default {
  /*
    data () {
        return {
            edges: {},
            nodes: {}
        }
    },
    */

  mounted() {
    /* create graph itself */
    const g = new dagreD3.graphlib.Graph().setGraph({});
    g.setGraph({
      nodesep: 70,
      ranksep: 50,
      rankdir: "LR",
      marginx: 20,
      marginy: 20,
    });
    console.log(g);

    const render = new dagreD3.render(); // eslint-disable-line new-cap
    console.log(render);

    const svg = d3.select("svg");
    const container = svg.select("g");

    console.log(svg);
    console.log(container);

    /* define zoom behavior */
    function zoomed(e) {
      container.attr("transform", e.transform);
    }

    const zoom = d3.zoom().scaleExtent([1, 10]).on("zoom", zoomed);

    g.setNode("kspacey", { label: "Kevin Spacey", width: 144, height: 100 });
    g.setNode("blabla", { label: "blabla", width: 144, height: 100 });

    g.setEdge("kspacey", "blabla");

    svg.call(zoom);

    render(container, g);
  },
  /*
    methods: {
        draw () {
        }
    }
    */
};
</script>

<style scoped>
section {
  margin-bottom: 3em;
}

section p {
  text-align: justify;
}

svg {
  border: 1px solid #ccc;
  overflow: hidden;
  margin: 0 auto;
  background: white;
  width: 800px;
  height: 600px;
}

text {
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.node rect {
  stroke: #333;
  fill: #fff;
  stroke-width: 1.5px;
}

.myback {
  background: gray;
}
</style>

代码框链接为这里

Answer 1

这个组成部分有两个问题：

1. 需要设置默认的边缘标签

我错过了一个图形实例化的电话。它应该是

const g = new dagreD3.graphlib.Graph()
    .setGraph({})
    .setDefaultEdgeLabel(function () { return {} })

1. d3.select()选择并使用错误的节点进行呈现。由于使用了fontawesome，在路由器链接中，我使用了以下方法

因为字体-令人敬畏的图标被呈现到<svg>元素中，所以呈现发生在该节点中，但我只注意到在修复了默认边缘之后。

如果有人有同样的问题，这就是帮助我找出解释问题的例子。