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