这个问题是新问题，因为它使用 vivaGraphJS，而不是 D3。有一些关于 D3 的问题，但解决方案略有不同。
我正在尝试使用此 VivaGraph JS 在我的网页上可视化网络图。
下面是我网站的示例网络图。以及它的 HTML 和 JavaScript。我想要做的是当用户单击特定节点时，然后转到特定页面。
从示例图中可以看出，每个节点都有它的图像和“名称”，我想做：当我点击一个名为“name1”的节点时，我想去https://sample.com/sample/name1 .
我尝试使用“a href”，但没有用。我不知道该怎么做。如果有人知道该怎么做，请帮助我。graph.addNode 部分上的 url 是节点图像链接，而不是我单击节点时想要去的链接。此 JavaScript 脚本被放入 html 中，而不是 HTML 上的单独和链接的 javascript 文件。下面的脚本在 .
<script src="{{ url_for('static', filename='.../dist/vivagraph.js') }}"></script>
<script src="{{ url_for('static', filename='.../dist/vivagraph.min.js') }}"></script>
<script type="text/javascript" src="..js/jquery.min.js"></script>
<script type="text/javascript">
function main () {
var graph = Viva.Graph.graph();
// Construct the graph
graph.addNode('anvaka', {url : 'image link_url_1'});
graph.addNode('manunt', {url : 'image link_url_2'});
graph.addNode('thlorenz', {url : 'image link_url_3'});
graph.addNode('bling', {url : 'image link_url_4'});
graph.addNode('diyan', {url : 'image link_url_5'});
graph.addNode('pocheptsov', {url : 'image link_url_6'});
graph.addNode('dimapasko', {url : 'image link_url_7'});
graph.addLink('anvaka', 'manunt');
graph.addLink('anvaka', 'thlorenz');
graph.addLink('anvaka', 'bling');
graph.addLink('anvaka', 'diyan');
graph.addLink('anvaka', 'pocheptsov');
graph.addLink('diyan', 'dimapasko');
// Set custom nodes appearance
var graphics = Viva.Graph.View.svgGraphics(),
nodeSize = 20;
highlightRelatedNodes = function(nodeId, isOn) {
// just enumerate all realted nodes and update link color:
graph.forEachLinkedNode(nodeId, function(node, link){
var linkUI = graphics.getLinkUI(link.id);
if (linkUI) {
// linkUI is a UI object created by graphics below
linkUI.attr('stroke', isOn ? '#F1C40F' : 'gray');
}
});
};
graphics.node(function(node) {
// The function is called every time renderer needs a ui to display node
var ui = Viva.Graph.svg('g'),
svgText = Viva.Graph.svg('text').attr('y', '-4px').text(node.id),
img = Viva.Graph.svg('image')
.attr('width', nodeSize)
.attr('height', nodeSize)
.link(node.data.url);
$(ui).hover(function() { // mouse over
highlightRelatedNodes(node.id, true);
}, function() { // mouse out
highlightRelatedNodes(node.id, false);
});
ui.append(svgText);
ui.append(img);
return ui;
})
.placeNode(function(nodeUI, pos){
// Shift image to let links go to the center:
nodeUI.attr('transform',
'translate('+
(pos.x - nodeSize / 2) + ',' + (pos.y - nodeSize / 2) + ')');
});
graphics.link(function(link){
return Viva.Graph.svg('path')
.attr('stroke', 'gray');
}).placeLink(function(linkUI, fromPos, toPos) {
// linkUI - is the object returend from link() callback above.
var data = 'M' + fromPos.x + ',' + fromPos.y +
'L' + toPos.x + ',' + toPos.y;
// 'Path data' (http://www.w3.org/TR/SVG/paths.html#DAttribute )
// is a common way of rendering paths in SVG:
linkUI.attr("d", data);
});
var renderer = Viva.Graph.View.renderer(graph,
{
graphics : graphics
});
renderer.run();
}
</script>
<style type="text/css" media="screen">
svg { width: 100%; height: 50%; }
</style>
在 HTML 文件中的一个 div 标签处，我调用了 main 函数。
<div role="tabpanel" class="tab-pane fade in active" id="Marketoverview">
<script type="text/javascript">
main();
</script>
</div>