Vis.js更改.css文件

Question

我想要更改vis.js库的底层.css文件。然而，这些变化并没有反映出来，我甚至在“工具提示”或“导航按钮”这样的功能上输掉了。

我尝试将以下内容放入我的.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" />

我只想更改导航按钮和工具提示的颜色。

干杯!

Answer 1

这个Q是相当老的，但仅供记录：

据我所见，VIS网络中的元素是通过渲染图形时传递给它的函数的设置来设置样式的。这可能是因为vis.js将图形渲染到一个HTML canvas，这基本上是浏览器的一个黑盒，它不能动态地对它应用任何样式。

因此，请前往文档http://visjs.org/docs/network/并阅读可能的内容。通常，您可以更改颜色{填充、边框、文本}、字体系列、字体大小、节点形状、边缘样式等。

此外，实例库也非常有用：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
        }
    }
};