Fatal编程技术网
  • d3.js/
  • D3.js d3图形上的鼠标单击节点事件

D3.js d3图形上的鼠标单击节点事件

d3.js graph

D3.js d3图形上的鼠标单击节点事件,d3.js,graph,onclick,vivagraphjs,D3.js,Graph,Onclick,Vivagraphjs,我需要在图形节点上插入一个mouseclick事件，但所有方法都不适合我 我绘制图表的代码如下： <!DOCTYPE html> <html> <head> <title>01. Create Graph. Vivagraph SVG tutorial.</title> <script type="text/javascript" src="VivaGraphJS-master/dist/vivagraph.js"><

我需要在图形节点上插入一个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>


1创建图形。Vivagraph SVG教程。
函数main（）{
//1-格拉福工程中心
var-graph=Viva.graph.graph（）；
//2-阿迪西奥南多·诺斯·阿雷斯塔斯
graph.addNode（'natalia'，'ledlightblue.png'）；
addNode（'jessica'，'krec_record.png'）；
graph.addNode（'lucas'，'ledbyellow.png'）；
graph.addNode（'leo'，'ledgreen.png'）；
graph.addNode（'hcii'，'ledpulper.png'）；
addNode（'evento'，'krec_record.png'）；
图.addLink（'natalia'，'hcii'）；
图.addLink（'jessica'，'hcii'）；
图.addLink（'lucas'，'hcii'）；
图.addLink（'leo'，'hcii'）；
graph.addLink（'jessica'，'evento'）；
var graphics=Viva.Graph.View.svgGraphics（）；
//var renderer=Viva.Graph.View.renderer（图形）；
graphics.node（函数（节点）{
var ui=Viva.Graph.svg（'图像'）
.attr（'width'，32）
.attr（'height'，32）
.link（'https://cdn1.iconfinder.com/data/icons/nuvola2/32x32/actions/“+节点数据）；
返回（ui）；
});
图形链接（函数链接）{
返回Viva.Graph.svg（'path'）
.attr（'笔划'，'黑色'）
.attr（“笔划宽度”，2）；
}).placeLink（功能（linkUI、fromPos、toPos）{
变量数据='M'+fromPos.x+'，'+fromPos.y+
‘L’+toPos.x+’，’+toPos.y；
linkUI.attr（“d”，数据）；
})
var renderer=Viva.Graph.View.renderer（图形{
图形：图形
});
renderer.run（）；
}
html，正文，svg{宽度：100%；高度：100%；}

我尝试了很多用于鼠标悬停事件的方法

我用它来画图表

一些解决方案？

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);
});
进入：

$（用户界面）。悬停和$（用户界面）。单击“来自JQuery”。

做一把小提琴，然后我们可以做点什么……这次跑得很好，thaks@pierpytom为您解答 
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);

});