d3 图上的 MouseClick 节点事件

Question

我需要在图形节点上插入鼠标点击事件，但所有方法都不适合我。

我做图表的代码是这样的：

<!DOCTYPE html>
<html>
<head>
<title>01. Create Graph. Vivagraph SVG tutorial.</title>
<script type="text/javascript" src="VivaGraphJS-master/dist/vivagraph.js"></script>
<script type="text/javascript">
    function main () {
// 1- criar um projeto de grafo
var graph = Viva.Graph.graph();

// 2 - adicionando nós e arestas
graph.addNode('natalia', 'ledlightblue.png');
graph.addNode('jessica', 'krec_record.png');
graph.addNode('lucas', 'ledyellow.png');
graph.addNode('leo', 'ledgreen.png');
graph.addNode('hcii', 'ledpurple.png');
graph.addNode('evento', 'krec_record.png');
graph.addLink('natalia', 'hcii');
graph.addLink('jessica', 'hcii');
graph.addLink('lucas', 'hcii');
graph.addLink('leo', 'hcii');
graph.addLink('jessica', 'evento');

var graphics = Viva.Graph.View.svgGraphics(); 
//var renderer = Viva.Graph.View.renderer(graph);

graphics.node(function(node) {

    var ui = Viva.Graph.svg('image')
            .attr('width', 32)
            .attr('height', 32)
            .link('https://cdn1.iconfinder.com/data/icons/nuvola2/32x32/actions/' + node.data);

            return(ui);
});
graphics.link(function(link){
return Viva.Graph.svg('path')
              .attr('stroke', 'black')
              .attr('stroke-width',2);
 }).placeLink(function(linkUI, fromPos, toPos) {
    var data = 'M' + fromPos.x + ',' + fromPos.y +
               'L' + toPos.x + ',' + toPos.y;
    linkUI.attr("d", data);
})

var renderer = Viva.Graph.View.renderer(graph, {
    graphics : graphics
});
renderer.run();
}


</script>

<style type="text/css" media="screen">
    html, body, svg { width: 100%; height: 100%;}
</style>

我尝试了很多方法like this 用来做鼠标悬停事件

我正在使用 VivaGraph.js 来制作图表

有解决办法吗？

Answer 1

D3js 和 VivaGraphJS 是两个不同的库，你的问题只是关于 VivaGraphJs（在代码中甚至没有导入 D3），"d3.js" 标签应该被删除。

一个可能的解决方案是导入 JQuery 并更改这部分代码：

graphics.node(function(node) {

    var ui = Viva.Graph.svg('image')
            .attr('width', 32)
            .attr('height', 32)
            .link('https://cdn1.iconfinder.com/data/icons/nuvola2/32x32/actions/' + node.data);

            return(ui);
});

进入：

graphics.node(function(node) {

    var ui = Viva.Graph.svg('image')
            .attr('width', 32)
            .attr('height', 32)
            .link('https://cdn1.iconfinder.com/data/icons/nuvola2/32x32/actions/' + node.data);

            $(ui).hover(function() { // mouse over
                console.log("hovering in.", node.id);
            }, function() { // mouse out
                console.log("hovering out.", node.id);
            });

            $(ui).click(function() { // mouse click
                console.log("click.", node.id);
            });

    return(ui);

});

$(ui).hover 和 $(ui).click 来自 JQuery.

d3 图上的 MouseClick 节点事件

MouseClick node event on d3 graph

graph

onclick

d3.js

vivagraphjs