0

我正在尝试Vue2使用dagre-d3用于渲染有向图的非常简单的示例。不幸的是，即使是非常简单的例子，它也行不通。在网上其他地方找到的示例使用的是旧版本的d3. 目前，Vue2app 大多是带有typescriptas 语言的路由器的默认模板。Diagram组件在javascript（由于我的代码中缺少类型d3和dagre-d3）。

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

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

它发生在这条线上

render(container, g);

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

帮助？

图.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 链接在这里

4

1 回答 1

0

这个组件有两个问题：

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

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

const g = new dagreD3.graphlib.Graph()
    .setGraph({})
    .setDefaultEdgeLabel(function () { return {} })
  1. d3.select() 选择并使用错误的节点进行渲染。由于使用了fontawesome，在路由器链接中，我使用了以下
<router-link to="/about">
    <font-awesome-icon :icon="['fas', 'info-circle']" />
</router-link>

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

如果有人有同样的问题，这个例子是帮助我识别解释问题的例子

于 2020-10-31T15:48:21.477 回答