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 画布上，而 HTML 画布基本上是浏览器的黑匣子，它不能动态地对其应用任何样式。

所以，请前往文档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
        }
    }
};