如何使用dagre d3.js（javascript庫）將點擊事件添加到有向圖中？

我已經能夠使用達格繪製有向圖。不過，現在我想刪除一個節點/邊沿點擊它。我可以使用g.delEdge和g.delNode進行刪除，但我怎麼知道有人點擊了該節點？請在下面dagre代碼中看到我的JavaScript和勸我什麼，我需要添加到它。（我讀從JSON文件所需的節點和邊緣，分析數據並繪製它們）如何使用dagre d3.js（javascript庫）將點擊事件添加到有向圖中？

function MyFunc() 
{ 
var buffer = JSON.parse(data); 
var nodesarray = new Array(); 
for(var i=0;i<Object.keys(buffer[0].nodes).length;i++) 
{ 
nodesarray.push(buffer[0].nodes[i].name); 
} 

// Create the input graph 
var g = new dagreD3.Digraph(); 

for(i=0;i<nodesarray.length;i++) 
{ 
//To give styles to nodes 
//g.addNode(0, { label: 'Female', labelStyle: 'font-weight: bold;', style: 'stroke: #f66; stroke-width: 10px;', nodeclass: 'type-TOP' }); 
g.addNode(nodesarray[i],{label:nodesarray[i]}); 
} 

for(var i=0;i<Object.keys(buffer[0].edges).length;i++) 
{ 
var source = buffer[0].edges[i].source; 
var destination = buffer[0].edges[i].destination; 
var weight = buffer[0].edges[i].weight; 
var strokewidth = weight*10; 
var mystyle='stroke:#f66; stroke-width:'; 
mystyle = mystyle + strokewidth + 'px'; 

//To give styles to edges 
//g.addEdge(null, 5, 7, { style: 'stroke: #f66; stroke-width: 3px;',label: "Label for the edge" }); 
g.addEdge(i,source,destination,{style: mystyle,label:weight}); 
} 

/* Deleting a node/edge example */ 
//g.delNode(nodesarray[0]); 
//g.delNode(nodesarray[1]); 
//g.delEdge(0); 

// Create the renderer 
var renderer = new dagreD3.Renderer(); 
var l = dagreD3.layout() 
       .nodeSep(100) 
       .rankSep(200) 
       .edgeSep(80) 
       .rankDir("LR"); 
renderer.layout(l); 

// Override drawNodes to add nodeclass as a class to each node in the output 
// graph. 
var oldDrawNodes = renderer.drawNodes(); 
renderer.drawNodes(function(graph, root) { 
    var svgNodes = oldDrawNodes(graph, root); 
    svgNodes.each(function(u) { d3.select(this).classed(graph.node(u).nodeclass, true); }); 
    return svgNodes; 
}); 

// Disable pan and zoom 
renderer.zoom(false); 
//renderer.edgeInterpolate('linear'); 

// Set up an SVG group so that we can translate the final graph. 
var svg = d3.select('svg'), 
    svgGroup = svg.append('g'); 

// Run the renderer. This is what draws the final graph. 
var layout = renderer.run(g, d3.select('svg g')); 

// Center the graph 
var xCenterOffset = (svg.attr('width') - layout.graph().width)/2; 
svgGroup.attr('transform', 'translate(' + xCenterOffset + ', 80)'); 
svg.attr('height', layout.graph().height + 200); 
}

來源

2014-09-30 IAMTubby

我看到你已經重寫了添加類選擇器的功能，您可以類似地添加單擊事件處理程序，請參閱以下示例。

// Override drawNodes to set up the click. 
    var oldDrawNodes = renderer.drawNodes(); 
    renderer.drawNodes(function(g, svg) { 
     var svgNodes = oldDrawNodes(g, svg); 

     // on click event handler 
     svgNodes.on('click', function(d) { console.log('Clicked on node - ' + d); }); 

     return svgNodes; 
    });

添加單擊事件處理程序的邊緣，嘗試像如下代碼

var oldDrawEdges = renderer.drawEdgePaths(); 
    renderer.drawEdgePaths(function(g, svg) { 
     var edges = oldDrawEdges(g, svg); 
     edges.on('click', function (edgeId) { alert('Clicked on - ' + edgeId);}); 
     return edges; 
    });

來源

2014-10-01 06:27:47 iamrakesh

哇噢！有用。但我有幾個問題。 1.是在達格爾的一個函數還是來自svg？它的文檔在哪裏？如果它來自svg，我可以使用dagre中的所有svg函數嗎？ 2.我試圖通過用renderer.drawEdge替換renderer.drawNodes來使邊緣可點擊。但它不起作用。我如何使邊緣可點擊？ – IAMTubby 2014-10-01 08:59:53

我認爲'on'函數來自SVG。我其實通過D3來源並嘗試過。您可以嘗試在D3源代碼中查找「defaultDrawNodes」，並查看節點是如何繪製的。對於邊緣，你可能不得不嘗試覆蓋'drawEdgePaths'，我的自我沒有嘗試它，但它應該工作。嘗試在D3源代碼中找到'defaultDrawEdgePaths'，查看邊緣是如何繪製的。 – iamrakesh 2014-10-01 09:44:10

我嘗試點擊事件處理程序的邊緣和它的作品，看到我更新後的帖子。 – iamrakesh 2014-10-01 09:48:51

這爲我處理節點點擊的東西：

svg.selectAll("g.node").on("click", function(id) { 
    console.log("Clicked " + id); 
});

來源

2015-03-27 20:30:36

如何使用dagre d3.js（javascript庫）將點擊事件添加到有向圖中？

回答

相關問題