Crea etichette contentedable in un layout di forza d3js con foreignObject e trascina su Chrome

Question

Qui puoi trovare un grafico con etichette modificabili (usando l'anteprima di SVG).

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/

Se rimuovo la forza di resistenza, è ok su Chrome & FF.

Il problema è che non funziona bene su Chrome. OK su Firefox. Un'idea?

Grazie

Yannick

Answer 1

Utilizzando Chrome V54, ci si sente come un insetto (un click sinistro del mouse sul nodo di testo non visualizza un prompt per l'immissione di testo). Tuttavia, esiste una soluzione:

Fare clic con il pulsante destro del mouse sull'elemento di estensione testo. Questo applica una selezione blu al testo. Una volta selezionato, puoi semplicemente iniziare a digitare per sovrascrivere il testo esistente.

Quando hai finito di modificare il testo, fai clic in un punto qualsiasi al di fuori del testo.