dagrejs / dagre-d3

A D3-based renderer for Dagre
MIT License
2.85k stars 590 forks source link

not able to change labels for nodes and edges #92

Open aftab-hassan opened 10 years ago

aftab-hassan commented 10 years ago

Hi, I have been trying to change the labels of nodes and edges on clicking them. I have tried the graphlib APIs digraph.node(1, "Some node value"); and digraph.edge("A", "Some edge value");

Please see my code below which I tried for changing the label of nodes on click

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

  svgNodes.on('click', function(d)
  {
   alert('clicked on node - '+d);
   g.node(d,"newnodelabel");
   renderer.run(g, d3.select('svg g'));
  });

  return svgNodes;
});

And this one for changing the label of edges on click

var oldDrawEdges = renderer.drawEdgePaths();
    renderer.drawEdgePaths(function(g, svg) {
        var edges = oldDrawEdges(g, svg);
        edges.on('click', function (edgeId) 
        {  
         alert('Clicked on - ' + edgeId);
         g.edge(edgeId,"newedgelabel");
   renderer.run(g, d3.select('svg g'));
        });

        return edges;
    });

However, these do not work. Also, I haven't been able to print out the labels using g.node(d); and g.edge(edgeId);

michcald commented 9 years ago

This might help

var g = new dagreD3.graphlib.Graph().setGraph();
// adding nodes
g.setNode("node1");
g.setNode("node1");
// adding transactions
g.setEdge("node1", "node2");

var svg = d3.select("svg");
var inner = svg.select("g");
var render = new dagreD3.render();

inner
  .selectAll("g.node")
  .on("click", function(nodeId) {
     // whatever
  });

inner
  .selectAll("g.edgePath")
  .on("click", function(edge) {
     nodeFromId = edge.v;
     nodeToId = edge.w;
     // whatever
  });