1

I need to provide "renaming" functionality to rename nodes using the Icicle example (http://bl.ocks.org/mbostock/4347473).

I am not able to find any solutions similar to what I would like to do, and as browsers usually do not allow for right click, I was wondering if anyone has any suggestions on how to allow for this option and then also how to go about allowing someone to be able to rename a specific node's name.

Thanks.

VividD
  • 10,456
  • 6
  • 64
  • 111
sim1
  • 457
  • 1
  • 7
  • 26
  • Make each node selectable and show a textfield next to the graph that allows to change the node's name? – Felix Kling Apr 09 '14 at 01:42
  • If you google for editable text in D3 you will find some interesting links. There are some buggy implementations but this [one](http://jsbin.com/adUnIwuH/8/edit) seems to offer a workable path (click on text to see it in action), including instructions to push changes to server, if desired. – FernOfTheAndes Apr 09 '14 at 07:28
  • Thanks for your comments. And many thanks @FernOfTheAndes, that example is good! Will have a look at using it. – sim1 Apr 09 '14 at 11:55
  • Hi @FernOfTheAndes, I used the on click part of the example you provided, but I am a little confused about some of the lines in that function. I am using rects and labels, how would I update the nodes data without having actual "nodes" as in that example? Thanks. – sim1 Apr 10 '14 at 01:23
  • Hi @user2651192, would you care to put a minimal jsfiddle together? It would make it easier to work together on this. – FernOfTheAndes Apr 10 '14 at 17:29
  • Hi @FernOfTheAndes, I think that it is updating the nodes data, but my bootstrap popover that I have - it is not updating in the heading. Nothing to do with D3, so if you would like to post your comment as an answer I will accept it as the answer for this question because that is the example I used. Thanks! – sim1 Apr 13 '14 at 10:07
  • @user2651192 Agree, it is good to put a workable solution in the records. Thanks. – FernOfTheAndes Apr 13 '14 at 11:00
  • @user2651192 How are you coming along on this issue? – FernOfTheAndes Apr 16 '14 at 01:30
  • Hi @FernOfTheAndes, it is working well. I have had to move on to other D3 tasks for what I am doing - but I will finalize this by the end of the week and let you know. The example you posted works quite quick and immediately changes the label, the only thing I may need (that I can think of now) is to change the prompt to a text field that is displayed near to the selected node and I am not yet sure how to do that. – sim1 Apr 16 '14 at 17:43

1 Answers1

1

For the record and per kind request by user2651192, the most workable path for this that we could find is here and, more specifically, the code to change the text is:

...
node.append("text")
    .text(function(d){ return d.name; })
    .on('click', function(d){
        var result = prompt('Change the name of the node',d.name);
        if(result) {
            d.name = result; 
            var node1 = canvas.selectAll('.node').data(nodes);
            node1.select('text')
                .text(function(d){ return d.name; });
        }
    )};
...
FernOfTheAndes
  • 4,975
  • 2
  • 17
  • 25