javascript - 有向图中的节点重叠边

Question

节点是否可能不与边缘重叠？我使用 dagre d3 作为图表。对于节点，我使用引导程序。如果不能自动完成，我该如何手动完成？这是一个示例图。我需要一个不是专门针对 Fiddle/Image 中的图形的通用解决方案。 JS小提琴

var g = new dagreD3.graphlib.Graph().setGraph({});
  for (var i = 0; i < 7; i++) {
    var html = '<div class="panel panel-primary">'
    html += '<div class="panel-heading">' + i + ' Panel</div>'
    html += '<div class="panel-body"><p style= "color: black;">Test<p></div>'
    html += '</div>'
    g.setNode(i, {
      labelType: "html",
      label: html,
      padding: 0
    })
  }
  g.setEdge(0, 1, {
    label: "",
    lineInterpolate: 'basis',
  })
  g.setEdge(1, 2, {
    label: "",
    lineInterpolate: 'basis',
  })
  g.setEdge(0, 2, {
    label: "",
    lineInterpolate: 'basis',
  })
  g.setEdge(2, 3, {
    label: "",
    lineInterpolate: 'basis',
  })
  g.setEdge(3, 1, {
    label: "",
    lineInterpolate: 'basis',
  })
  g.setEdge(4, 1, {
    label: "",
    lineInterpolate: 'basis',
  })
  g.setEdge(5, 2, {
    label: "",
    lineInterpolate: 'basis',
  })
  g.setEdge(6, 1, {
    label: "",
    lineInterpolate: 'basis',
  })

  var svg = d3.select("svg"),
    inner = svg.select("g");

  // Set up zoom support
  var zoom = d3.behavior.zoom().on("zoom", function () {
    inner.attr("transform", "translate(" + d3.event.translate + ")" +
      "scale(" + d3.event.scale + ")");
  });
  svg.call(zoom);
  var render = new dagreD3.render();
  render(inner, g);
  var initialScale = 0.75;
  zoom
    .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
    .scale(initialScale)
    .event(svg);