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

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中如何设置标题的高度？

How can I set the height ot the title in vis js?

javascript

vis.js

vis.js-network

演示