Machen Sie zufriedene Etiketten in einem d3js Force-Layout mit ForeignObject und ziehen Sie auf Chrome

Question

Hier finden Sie eine Grafik mit bearbeitbaren Etiketten (mit SVG Foreinobject).

nodes.append("foreignObject") 
     .attr({width: 100, height: 100}) 
     .append("xhtml:body") 
     .append("xhtml:span") 
     .attr("contenteditable", true) 
     .html(function(d) { return d.name }) 
     .on("keyup", function(d, i) 
       { 
        console.log(d3.select(this).text()); 
       }); 

http://jsfiddle.net/J9HZ2/

Wenn ich die Widerstandskraft zu entfernen, ist es auf Chrome & FF ok.

Das Problem ist, dass es in Chrome nicht funktioniert. OK auf Firefox. Eine Idee?

Dank

Yannick

Answer 1

Chrome v54 verwenden, fühlt es sich wie ein Bug (einem linken Mausklick auf den Text-Knoten für die Eingabe von Text keine Aufforderung nicht angezeigt). Es gibt jedoch eine Problemumgehung:

Klicken Sie mit der rechten Maustaste auf das Textbereichselement. Dies wendet eine blaue Auswahl auf den Text an. Nach der Auswahl können Sie einfach mit der Eingabe beginnen, um den vorhandenen Text zu überschreiben.

Wenn Sie mit der Bearbeitung des Textes fertig sind, klicken Sie auf eine beliebige Stelle außerhalb der Textspanne.