dagrejs / dagre-d3

A D3-based renderer for Dagre
MIT License
2.84k stars 587 forks source link

Node overlapping edge #291

Open guitar9 opened 6 years ago

guitar9 commented 6 years ago

is it possible that the node does not overlap the edge? I use dagre d3 for the graph. For nodes i use bootstrap. When it is not automatically possible, how can i do it manually? This is an example graph. I need a gerneral solution not specially for the graph in the Fiddle/Image. JS Fiddle

enter image description here

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);