Creare un suggerimento su elementi creati da jointjs

Question

Il titolo dice tutto, ho creato un grafico su carta e riempito con celle e collegamenti, ora ho bisogno di aggiungere un suggerimento per visualizzare le informazioni su ogni elemento (selezionato, al passaggio del mouse ...) .

Apprezzo tutti i suggerimenti, i link, le risposte ...

Answer 1

tutte le operazioni necessarie può essere trovato in joint.ui.Tooltip.

Dovrai essere in grado di definire il percorso degli elementi generati nel tuo grafico, ma non dovrebbe essere troppo difficile nella maggior parte dei casi. Ho lavorato con questa roba per meno di una settimana e sembra abbastanza semplice.

Answer 2

Se si aggiunge un elemento <title /> al markup SVG alle vostre definizioni di forma (questo presuppone che si sta utilizzando forme personalizzate):

<..shape markup...><title /><...end of shape markup...> 

Così, per esempio, il vostro codice potrebbe essere simile a questo:

<g class="rotatable"> 
    <g class="scalable"> 
     <circle class="element-process"/> 
     <title /> 
    </g><text/> 
</g> 

Quindi è possibile aggiungere un tooltip statica nel link definizione dell'elemento questo:

joint.shapes.custom.myCircle = joint.shapes.basic.Generic.extend({ 

    markup: '<g class="rotatable"><g class="scalable"><circle class="element-process"/><title /></g><text/></g>', 

    defaults: joint.util.deepSupplement({ 
     type: 'custom.myCircle, 
     attrs: { 
      title: {text: 'Static Tooltip'}, 
      '.element-process': { 'stroke-width': 1, r: 30, stroke: 'black', transform: 'translate(30, 30)' }, 
      text: { ref: '.element-process'} 
     }, 
     size: { width: 100, height: 100 } 
    }, joint.shapes.basic.Generic.prototype.defaults) 
}); 

o omettere/sovrascrivere il title: {text: 'Static Tooltip'} e definire il testo della descrizione comandi più avanti nel codice:

var cell = new joint.shapes.custom.myCircle(); 
var toolTip = 'Dynamic Tooltip Text; 
cell.attr('title/text', toolTip); 

Answer 3

Ho modificato joint.js per gestire l'attributo "titolo" utilizzando lo schema definito per elementi con un attributo "testo". Se cercate:

// Make special case for `text` attribute. 

Ci sarà un blocco per la gestione dell'attributo "testo". Ho aggiunto questo blocco dopo di esso per gestire il "titolo". Sarà anteporre la svg: nodo di titolo per l'elemento corrente:

if (!_.isUndefined(attrs.title)) { 
    var title = document.createElementNS('http://www.w3.org/2000/svg', 'title'), 
     node = document.createTextNode(attrs.title); 
    title.appendChild(node); 

    $selected.each(function() { 
     V(this).prepend(title); 
    }); 
}