Hello i have a problem with rendering Bootstrap with Dagre D3 in JavaScript. Dagre D3 is a Libary based on D3. First Problem is that the star-glyphicon is only in the first node, but not in the second node. Why? Second Problem is that the Dropdown Menu is not correctly rendering. It is only in the first node ( not in the second). when i click on the Dropdown Menu there does not Pop Up a menu. Does somebody have solution?
<!doctype html>
<meta charset="utf-8">
<title>Bootstrap Nodes</title>
<link rel="stylesheet" href="demo.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id='panel' class='panel panel-primary'>
<div class='panel-heading fixed-panel-head'>
<h3 class='panel-title'>
<h3 class='panel-title'> <span class='glyphicon glyphicon-star'></span> Sample</h3>
</h3>
</div>
<div class='panel-body fixed-panel-foot'>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<style id="css">
.fixed-panel-head {
min-height: 40px;
max-height: 40px;
}
.fixed-panel-foot {
min-height: 60px;
max-height: 60px;
}
.node g div {
width: auto;
height: 100px;
color: #000;
}
.edgePath path {
stroke: #333;
stroke-width: 1.5px;
}
</style>
<svg id="svg-canvas" width=100% height=600></svg>
<script id="js">
// Create the input graph
var g = new dagreD3.graphlib.Graph()
.setGraph({})
.setDefaultEdgeLabel(function() {
return {};
});
var element = document.getElementById("panel");
var elementHtml = element.outerHTML;
g.setNode((1), {
labelType: "html",
label: elementHtml,
rx: 5,
ry: 5,
padding: 0
});
g.setNode((2), {
labelType: "html",
label: elementHtml,
rx: 5,
ry: 5,
padding: 0
});
g.setEdge(1, 2);
var render = new dagreD3.render();
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
svgGroup = svg.append("g");
// Run the renderer. This is what draws the final graph.
render(d3.select("svg g"), g);
// Center the graph
var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
svg.attr("height", g.graph().height + 40);
</script>