Error in mounted hook: "TypeError: edge is undefined" when using dagre-d3 with vue2

Question

我正在尝试设置非常简单的示例 Vue2 使用 dagre-d3 来呈现有向图。不幸的是，即使是非常简单的例子，它也不会起作用。在网上其他地方找到的示例使用的是 d3 的旧版本。目前，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>

Codesanbox link 是 here

Answer 1

这个组件有两个问题：

需要设置默认边标签

我错过了对图形实例化的调用。应该是

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

d3.select() 正在选择和使用错误的节点进行渲染。由于使用了 fontawesome，在 router-link 中，我使用了以下

<router-link to="/about">
    <font-awesome-icon :icon="['fas', 'info-circle']" />
</router-link>

因为 font-awesome-icon 被渲染到 <svg> 元素，渲染发生在该节点中，但我只是在使用默认边缘修复后才注意到这一点。

如果有人有同样的问题，this 示例是帮助我确定已解释问题的示例

Error in mounted hook: "TypeError: edge is undefined" when using dagre-d3 with vue2

Error in mounted hook: "TypeError: edge is undefined" when using dagre-d3 with vue2

d3.js

vuejs2

vue-component

dagre-d3