WordPress 插件inseri.swiss 之Cytoscape Block使用教程
插件官网https://docs.inseri.swiss/blocks/cytoscape/
使用教程:
1. 将elements(json格式)写入textEditor(插件带的区块)中
is loading …
2. 将style(json格式)写入textEditor(插件带的区块)中
is loading …
3. 将layout(json格式)写入textEditor(插件带的区块)中
is loading …
4. 配置数据源为之气步骤的区块
is loading …
拓展:不想要插件的方式:
另外,不想要插件的方式的话,因为此插件用的是Cytoscape.js,所以可以直接通过原生方式编写html,在wordpress中使用自定义html
<!DOCTYPE html>
<html>
<head>
<title>Cytoscape.js 示例</title>
<script src="https://unpkg.com/cytoscape@3.21.0/dist/cytoscape.min.js"></script>
<!-- 引入Cytoscape.js -->
<style>
#cy {
width: 800px;
height: 600px;
display: block;
position: relative;
margin: 20px auto;
border: 1px solid #ccc;
}
/* 设置图表容器的样式 */
</style>
</head>
<body>
<div id="cy"></div> <!-- 图表容器 -->
<script>
var cy = cytoscape({
container: document.getElementById('cy'), // 容器元素
elements: [ // 列表形式的元素数据
// 节点部分
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
// 边部分
{ data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
{ data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
{ data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
{ data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
{ data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
{ data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
{ data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
],
style: [ // 样式部分
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
'label': 'data(weight)'
}
}
],
layout: {
name: 'grid',
rows: 2
}
});
</script>
</body>
</html>