Как я могу установить высоту заголовка в Vis JS?

Question

Как я могу установить высоту заголовка в Vis JS?

Я создал сетевой график в модальном. Моя проблема в том, что если я хочу поместить длинное предложение в заголовок ребра, заголовок выходит из модального, и я не могу увидеть полное предложение. Я пытаюсь установить ширину заголовка с помощью 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>

1

javascript vis.js vis.js-network

Источник

user10197750 10 авг '18 в 19:04

1 ответ

Решение

Другие вопросы по тегам javascript vis.js vis.js-network

user3995261 12 авг '18 в 18:57 2018-08-12 18:57 · Accepted Answer · 2018-08-12 18:57

Приятно то, что ярлыки позволяют использовать 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 это все еще не всегда работает, как хотелось бы: зависит от того, где край был завис. Не уверен, почему они заставили это работать таким образом, но, возможно, решение проблемы с контейнером и его полями может решить проблему.