d3 Eventi non attivati ​​

Question

Utilizzo la forma dell'arco D3 e ho collegato il manipolatore D3 drag per catturare il movimento di trascinamento. Guardando debugger del browser:

Si può vedere che percorso risultante del Arc è infatti in ascolto per gli eventi appropriati e tuttavia i richiami non sono mai licenziato e non JS errori sono segnalati alla console.

Il codice utilizzato per aggiungere i gestori (così come i callback) sono qui. Per quelli di voi che hanno familiarità con Ember, ottimo, per quelli di voi non ho provato a mostrare solo le parti JS rilevanti.

import { drag } from 'd3-drag'; 
import { arc } from 'd3-shape'; 
import { select } from 'd3-selection'; 

const uiArc = Ember.Component.extend({ 
    layout, 
    tagName: '', 
    init() { 
    this._super(...arguments); 
    Ember.run.schedule('afterRender',() => { 
     this.svg = document.getElementById(this.elementId); 
     this.addDragListeners(`#${this.elementId} .unselected`); 
    }); 
    }, 

    addDragListeners(target) { 
    drag.container = this; 
    select(target).call(drag().on('start', this._dragStart)); 
    select(target).call(drag().on('drag', this._dragging)); 
    select(target).call(drag().on('end', this._dragEnd)); 
    }, 

    _dragStart(e) { 
    console.log('drag starting', e); 
    }, 
    _dragging(e) { 
    console.log('dragging', e); 
    }, 
    _dragEnd(e) { 
    console.log('drag ending', e); 
    }, 

Qualcuno può aiutarmi a capire come eseguire il debug di questo o suggerire cosa potrebbe essere sbagliato?

Nota: io sto usando d3 versione 4, ultima build a partire da oggi (30 maggio 2016)

---

Per ulteriore contesto, anche in questo caso è il modello manubri responsabile della redazione del percorso :

<path 
    d={{arc}} 
    class='unselected' 
    style="stroke: {{unselectedColor}}; fill: {{unselectedColor}};" 
></path> 

Niente di molto notevole qui, è solo far notare che il modello non si richiama ad eventi DOM nativi e che il nome della classe di "non selezionata" è disponibile i n il DOM per il selettore d3 per trovarlo (che sembra aver fatto; da qui gli ascoltatori di eventi DOM che appaiono nel debugger).

---

ho aggiunto una demo online del problema: demo. L'evento di trascinamento è collegato all'arco con il nome di classe 'unselected'. Dovresti essere in grado di trascinare da quella forma e attivare le richiamate.

Answer 1

Non è possibile che ci sia uno stile css applicato che include pointer-events: none?

Se si guarda a questo esempio jsfiddle vedrete non è possibile trascinare i cerchi con la classe undraggable applicata, ma non influisce gli eventi l'ispettore cromo dice gli elementi stanno ascoltando

.undraggable { 
    pointer-events: none; 
} 

http://jsfiddle.net/2y2yqy55/1/