Adding a "button" to each node

[lynerjy]

I'd like to modify my node shape so that all of them get drawn with a 'delete' button.

For example, a small square that I append to every node, which when clicked, can drive a series of actions. I want to make something I can refer to using something to the effect of svg.selectAll("g.deletebutton").on("click", function(id)...

Any ideas?

[lynerjy]

What I've done is to use the labelType: 'html', and then added a button inside. I.e..

g.setNode(n.nodeid, {
        labelType: 'html',
        label: "<input type='button' class='button' value='button'>some description",
}

Right now, in order to see which node's button has been pressed, I have one function to check the node for a click, and another function to check if the button has been clicked.

svg.selectAll("g.node").on("click", function(id) {
    var clickednode = id;
}

'click .button': function(){
    buttonclicked = 'true'
}

And then I run my event on both those outputs.

Is there any easier way to just directly get the id of the node which the button is in, when it's clicked?

[alanhe421]

I think you can use jQuery or pure js to do that.

[deanp70]

I think you can use jQuery or pure js to do that.

@alanhg @cpettitt I know this thread is old but I'm working on a similar problem and jQuery as far as I can tell does not solve this. Just to mention the differences, in my case I have a button in each node, that when clicked should re-render the node to include more details about it. I made it work when I click the entire node but that has annoying side-effects (for example if people click a link that appears in the node, it simultaneously redirects and expands the node.

Since dagreD3 creates nodes and edges as svg objects, I need to be able to get the node object when I click on a button that is included in the node. The node object meaning not the corresponding tag, but the actual dagreD3 object, same as if I add an .on("click") to the entire node.

Is this possible?

[RupalBarman-alation]

Did anyone here find a possible solution to this?

[hatpick]

@RupalBarman-alation Add a tooltip and add your actions inside the tooltip, this way you don't have to worry about your buttons overlapping with other nodes and edges. This lib is only considers nodes and edges in the graph to calculate where things should be, has no idea about your extra elements.