dagre-d3如何點擊節點並在此之後運行事件

我正在使用dagre-d3.js創建分層圖。現在我需要使節點可點擊並執行一個功能。我無法做到這一點。dagre-d3如何點擊節點並在此之後運行事件

當前一些我的代碼看起來像

var g = new dagreD3.graphlib.Graph().setGraph({}); 
g.setNode("TEST", { label: "TEST"}) 
g.setNode("TEST1", { label: "TEST1"}) 

g.setEdge("TEST", "TEST1", { label: "open", style: "stroke: green; stroke-width: 2px;fill: none", arrowheadStyle: "fill: green" }); 

var svg = d3.select("svg"), 
inner = svg.select("g"); 

var render = new dagreD3.render(); 
render(inner, g); 
var initialScale = 0.75; 
zoom 
.translate([(svg.attr("width") - g.graph().width * initialScale)/2, 20]) 
.scale(initialScale) 
.event(svg); 
svg.attr('height', g.graph().height * initialScale + 40);

我只需要能夠點擊測試或測試1和運行，我寫去該div同名頁上的功能（TEST， TEST1）

我看過這個，但它不幫助我。 https://github.com/cpettitt/dagre-d3/issues/13 此外，這似乎使用不同的方法，這是不適用於我。

請指引我

感謝， Nihir

來源

2015-02-11 user1094183

您可以使用jQuery選擇上點擊節點標籤，然後解析出節點名，並將它傳遞給你的函數。像這樣：

$(document).ready(function() { 
    $('.node').click(function() { 

    // This gets the node name from the 'class' attribute 
    var class_header = $(this).attr('class').split(' '); 
    var node_name = class_header[class_header.length - 1] 

    // Execute your function 
    myFunction(node_name) 

    }) 
})

來源

2015-02-11 15:23:04

這聽起來像一個有趣的方法。

但也有一些可用的內置方法，而我只是想出了

這裏是我的解決方案

VAR的選擇= inner.selectAll（「g.node」）; 選擇 .on（'click'，function（d）{ScrollToID（d）;}）;

來源

2015-02-12 16:00:55 user1094183

這裏有4個鼠標事件：

d3.selectAll('svg g.comp') 
    .on('mouseover', function(d) { 
    console.log('mouseover'); 
    }) 
    .on('mouseout', function(d) { 
    console.log('mouseout'); 
    }) 
    .on('mousedown', function(d) { 
    console.log('mousedown'); 
    }) 
    .on('mouseup', function(d) { 
    console.log('mouseup'); 
    });

來源

2015-12-23 06:41:23

dagre-d3如何點擊節點並在此之後運行事件

回答

相關問題