如何使用dagred3.js(javascript库)将点击事件添加到有向图中
How do I add a click event to a directed graph using dagre d3.js(javascript library)?
我已经能够使用dagre绘制有向图。但是,现在我想在单击节点/边时删除它。我可以使用g.delEdge和g.delNode进行删除,但我如何知道有人点击了该节点?请参阅下面的javascript dagre代码,并告诉我需要添加什么。(我正在从json文件中读取所需的节点和边,解析数据并绘制它们)
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);
}
我看到您已经覆盖了添加类选择器的功能,您可以类似地添加点击事件处理程序,请参阅以下示例。
// 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;
});
这对我处理节点点击起到了作用:
svg.selectAll("g.node").on("click", function(id) {
console.log("Clicked " + id);
});
相关文章:
- 将单击事件添加到数据表
- 将单击事件添加到附加的项目中
- 使用引导事件添加动画
- 如何将单击事件添加到JQuery中动态添加的元素中
- 如何在jQuery中将事件添加到新生儿元素中
- JQuery将侦听事件添加到.rezable(),然后附加DIV's
- jQuery:使用实时事件添加tabindex属性
- 将单击事件添加到显示字段
- 如何将事件添加到jQuery's on()回调
- 将此事件添加到工具栏
- TinyMCE 将另一个事件添加到粗体和斜体按钮
- 当用户在输入字段事件中输入内容时,为该字段事件添加动画占位符
- 使用 JQuery 将 onclick 事件添加到动态创建的定位点
- Raphaeljs 将点击事件添加到饼图的一部分
- 将事件添加到网格的coffeescript实现中
- 将事件添加到谷歌地图标记
- Javascript:将onkeydown事件添加到prompt()中
- 如何将onclick事件添加到joint.js元素中
- 角度指令:绑定'鼠标悬停'事件添加到元素
- 将事件添加到涉及for()的索引中的多个子节点