如何使用 dagre d3.js（javascript 库）将点击事件添加到有向图？

Question

我已经能够使用 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);
}

Answer 1

我看到您已经重写了添加类选择器的功能，您可以类似地添加点击事件处理程序，请参见以下示例。

    // 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;
    });

Answer 2

这对我处理节点点击有用：

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