3

您好，我 在 JavaScript 中使用Dagre D3渲染 Bootstrap 时遇到问题。Dagre D3 是一个基于 D3 的库。第一个问题是星形符号仅在第一个节点中，而不在第二个节点中。为什么？第二个问题是下拉菜单没有正确呈现。它仅在第一个节点中（不在第二个节点中）。当我单击下拉菜单时，不会弹出菜单。有人有解决方案吗？

<!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>

4

1 回答 1

0

尝试为每个控件的每个节点使用不同的 id。将有多个 ID 为 dropdownmenu1 的字段，其中只有一个可以工作。尝试使用节点 ID 连接。

于 2018-12-31T23:22:11.860 回答