Question

我在模态中创建了一个网络图。我的问题是，如果我想在边的标题中添加一个长句子，则标题不在模态中，因此我看不到完整的句子。我正在尝试使用widthConstraint设置标题的宽度，但仅适用于标签。我也试图设置模式的，但是它也不起作用。如何设置标题的宽度？

演示

function drawNetwork() {
      var nodes = [
        {id: 1, label: 'node 1'},
        {id: 2, label: 'node 2'}
      ];

      var edges = [
        {from: 1, to: 2, title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}
      ]

      var container = document.getElementById('network-container');

      var data = {
      nodes: nodes,
      edges: edges
    };
    var width = 550;
    var height = 400;
    var options = {
      width: width + 'px',
      height: height + 'px',
      nodes: {
        shape: 'dot'
      },
      edges: {
        smooth: false
      },
      physics: false,
      interaction: {
        dragNodes: true,// do not allow dragging nodes
        zoomView: false, // do not allow zooming
        dragView: true  // do not allow dragging
      },
      layout: {
              randomSeed:1,
              improvedLayout:true,
              hierarchical: {
                  enabled:true,
                  levelSeparation: 300,
                  nodeSpacing: 100,
                  treeSpacing: 10,
                  blockShifting: false,
                  edgeMinimization: true,
                  parentCentralization: true,
                  direction: 'LR',        // UD, DU, LR, RL
                  sortMethod: 'directed'   // hubsize, directed
                  }
          }
    };
    var network = new vis.Network(container, data, options);
  }
  
  $('#model4temp').on('shown.bs.modal', function() {
    drawNetwork();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />
  
  <script src="https://code.jquery.com/jquery.min.js"></script>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
  <a href='#' data-toggle='modal' data-target='#model4temp'>Click here for network in modal</a>
  
  <div class="modal fade" id="model4temp" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Sample Network in modal</h4>
      </div>
      <div class="modal-body">
      		<div id="network-container" style="height:400px;width:500px;"></div>        	
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

有趣的是，标签允许在其中包含html和css。这是您的代码段，仅在一个方面进行了修改：而不是

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

我在标签中放了一个包装好的版本：

<div style='white-space: normal;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

出于某些（相当容易理解的原因），标签最初具有类似white-space: nowrap的名称，然后将其更改回normal可以解决此问题：

function drawNetwork() {
      var nodes = [
        {id: 1, label: 'node 1'},
        {id: 2, label: 'node 2'}
      ];

      var edges = [
        {from: 1, to: 2, title: "<div style='white-space: normal; max-width: 15em;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>"}
      ]

      var container = document.getElementById('network-container');

      var data = {
      nodes: nodes,
      edges: edges
    };
    var width = 550;
    var height = 400;
    var options = {
      width: width + 'px',
      height: height + 'px',
      nodes: {
        shape: 'dot'
      },
      edges: {
        smooth: false
      },
      physics: false,
      interaction: {
        dragNodes: true,// do not allow dragging nodes
        zoomView: false, // do not allow zooming
        dragView: true  // do not allow dragging
      },
      layout: {
              randomSeed:1,
              improvedLayout:true,
              hierarchical: {
                  enabled:true,
                  levelSeparation: 300,
                  nodeSpacing: 100,
                  treeSpacing: 10,
                  blockShifting: false,
                  edgeMinimization: true,
                  parentCentralization: true,
                  direction: 'LR',        // UD, DU, LR, RL
                  sortMethod: 'directed'   // hubsize, directed
                  }
          }
    };
    var network = new vis.Network(container, data, options);
  }
  
  $('#model4temp').on('shown.bs.modal', function() {
    drawNetwork();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />
  
  <script src="https://code.jquery.com/jquery.min.js"></script>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
  <a href='#' data-toggle='modal' data-target='#model4temp'>Click here for network in modal</a>
  
  <div class="modal fade" id="model4temp" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Sample Network in modal</h4>
      </div>
      <div class="modal-body">
      		<div id="network-container" style="height:400px;width:500px;"></div>        	
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

PS仍然不能始终如愿地工作：取决于边缘的悬停位置。不知道为什么他们要这样做，但是也许处理容器及其边距可以解决问题。

如何在vis js中设置标题的高度？

演示

1 个答案: