0

グラフ ノードに mouseclick イベントを挿入する必要がありますが、どの方法でもうまくいきません。

グラフを作成した私のコードは次のとおりです。

<!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>

マウスオーバーイベントを行うために使用されるこのような多くの方法を試しました

グラフを作成するためにVivaGraph.jsを使用しています

いくつかの解決策？

4

1 に答える 1

0

D3js と VivaGraphJS は 2 つの異なるライブラリであり、質問は 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 から来ています。

于 2015-04-07T14:31:52.980 に答える