Vis.js изменить файл .css

Question

Я хочу изменить базовый .css-файл библиотеки vis.js. Однако изменения не отражаются, и я даже проигрываю такие функции, как «подсказки» или «кнопки навигации».

Я попытался поместить следующее в мой файл .html:

<script type="text/javascript" 
      src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> 
</script> 
<link href="/node_modules/vis/dist/vis.css" rel="stylesheet" type="text/css" /> 

Все, что я хочу, чтобы изменить цвет кнопок навигации и подсказок.

Cheers!

Answer 1

Это Q довольно старый, но только для записи:

Из того, что я видел, элементы VIS сетей стилизованы с помощью настройки функции переданного ему, когда граф оказывается. Вероятно, это связано с тем, что vis.js отображает график в HTML-холст, который является в основном черным ящиком для браузера, и он не может динамически применять к нему стиль.

Итак, перейдите к документам http://visjs.org/docs/network/ и прочитайте, что возможно. Как правило, вы можете изменить цвет {заполнения, границы текста}, семейство шрифтов, FONTSIZE, формы узлов, стиль ребер и т.д.

Кроме того, очень полезным является галерея примеров: http://visjs.org/network_examples.html

Пример моего настройки:

var options = { 
    // tree style 
    layout: { 
     // this would make the tree directed 
     // hierarchical: { 
     //  direction: LR, 
     //  sortMethod: directed 
     // }, 
     // this makes the tree always the same 
     randomSeed:2 
    }, 
    interaction: { 
     dragNodes :false, 
     navigationButtons: true, // these need some more CSS 
     keyboard: true 
    }, 
    // read the docs for this 
    physics: { 
     barnesHut: { 
      avoidOverlap: 0.99, 
      gravitationalConstant: -3300, 
      springLength: 150, 
     }, 
     minVelocity: 0.75, 
     timestep: 0.9, 

     stabilization: { 
      enabled:true, 
      iterations:1000, 
      updateInterval:25 
     }    
    }, 
    // general nodes settings 
    nodes: { 
     shape: 'box', 
     font: { 
      size: 14, 
      color: '#3f3f3f', 
      strokeWidth: 3, 
      strokeColor: 'white', 
      face: 'akrobat' 
     }, 
     borderWidth: 2, 
     color: { 
      background: '#d7d7f3', 
      border: '#3030a9', 
     } 

    }, 
    // settings for groups of nodes 
    groups: { 
     first: { 
      shape: 'diamond', 
      size: 5 
     }, 
     second: { 
      shape: 'dot', 
      size: '8', 
      font: { 
       strokeWidth: 0, 
       size: 18 
      }, 
      color: { 
       background: '#f3d7d7', 
       border: '#a93030' 
      } 
     } 
    }, 
    // general edges setting 
    edges: { 
     font: { 
      align: 'middle', 
      face: 'arial' 
     }, 
     smooth: { 
      forceDirection: none 
     } 
    } 
};