D3.js 安装的挂钩中出现错误：“0”；TypeError:边缘未定义"；将dagre-d3与vue2一起使用时

我试图用

Vue2

创建一个非常简单的示例，使用

dagre-d3

来渲染有向图。 不幸的是，即使使用非常简单的示例，它也无法工作。网上其他地方的例子都是使用较旧版本的

d3

。 目前，

Vue2

应用程序大多是默认模板，路由器的语言为

typescript

<代码>图表组件位于

javascript

中（由于我的代码中缺少

d3

和

dagre-d3

的类型）

运行下面提到的组件时，会发生以下错误，

块中不会显示任何内容

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

它发生在这条线上

render(container, g);

我唯一能想到的是，我可能缺少一些依赖项，或者所有组件都必须是typescript

帮忙

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>

这是一个图表组件
从“d3”导入*作为d3；
从“dagre-d3”导入dagreD3；
//设边={}
//让节点={}
//设g=new dagreD3.graphlib.Graph（）.setGraph（{}）
导出默认值{
/*
数据（）{
返回{
边：{}，
节点：{}
}
},
*/
安装的（）{
/*创建图形本身*/
const g=new dagreD3.graphlib.Graph（）.setGraph（{}）；
g、 设定图({
nodesep:70，
等级：50，
兰克迪尔：“LR”，
玛金克斯：20，
马金尼：20岁，
});
控制台日志（g）；
const render=new dagreD3.render（）；//eslint禁用line new cap
console.log（渲染）；
const svg=d3.选择（“svg”）；
const container=svg.select（“g”）；
log（svg）；
控制台日志（容器）；
/*定义缩放行为*/
函数缩放（e）{
container.attr（“transform”，即transform）；
}
const zoom=d3.zoom（）.scaleExtent（[1，10]）。打开（“缩放”，缩放）；
g、 setNode（“kspacey”，{标签：“Kevin Spacey”，宽度：144，高度：100}）；
g、 setNode（“blabla”，标签：{label:“blabla”，宽度：144，高度：100}）；
g、 setEdge（“kspacey”、“blabla”）；
调用（缩放）；
渲染（容器，g）；
},
/*
方法：{
画（）{
}
}
*/
};
部分{
边缘底部：3em；
}
第p节{
文本对齐：对齐；
}
svg{
边框：1px实心#ccc；
溢出：隐藏；
保证金：0自动；
背景：白色；
宽度：800px；
高度：600px；
}
正文{
字体大小：300；
字体系列：“Helvetica Neue”，Helvetica，Arial，无serf；
字体大小：14px；
}
路径链接{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
.node rect{
冲程：#333；
填充：#fff；
笔划宽度：1.5px；
}
myback先生{
背景：灰色；
}

---

Codesanbox链接是

此组件有两个问题：

需要设置默认的边缘标签

我错过了一个关于图形实例化的调用。应该是的

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

d3.select（）选择并使用错误的节点进行渲染。由于使用了fontawesome，在路由器链接中，我使用了以下

因为font awesome图标被渲染到

元素，所以渲染发生在该节点中，但我只是在使用默认边缘进行修复后才注意到这一点

如果有人有同样的问题，这个例子可以帮助我确定问题

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