0

我想更改 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" />

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

干杯!

4

1 回答 1

1

这个 Q 相当老了，但只是为了记录：

据我所见，VIS 网络中的元素是通过在渲染图形时传递给它的函数的设置来设置样式的。这可能是因为 vis.js 将图形呈现到 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
        }
    }
};
于 2017-05-28T13:04:09.033 回答