d3不觸發的事件

我使用D3的弧形，並附加D3 drag處理程序來捕捉拖動。看一下瀏覽器的調試器：d3不觸發的事件

你可以看到，所產生的電弧的路徑確實監聽相應的事件，但回調從未被觸發並沒有JS錯誤報告給控制檯。

用於添加處理程序（以及回調）的代碼在這裏。對於那些熟悉Ember的人來說，對於你們中的那些人來說，我已經試過只顯示相關的JS部分。

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); 
    },

任何人都可以幫助我弄清楚如何調試這個問題或提出什麼可能是錯誤的？

注：我使用D3 4版，最新版本爲今日（2016年5月30日）

有關其他方面，這裏也負責繪製路徑車把模板：

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

這裏沒有什麼很了不起的，它只是指出模板不調用任何本地DOM事件和的「未選擇的」之類的名稱可用我n爲d3選擇器找到它的DOM（它似乎完成了;因此DOM事件偵聽器顯示在調試器中）。

我已經添加了一個在線演示的問題：demo。拖動事件附加到classname爲'unselected'的弧上。你應該能夠從這個形狀拖動，並有回調火。

來源

2016-05-30 ken

可能會影響它的東西是，您將tagName設置爲「'，這會阻止Ember插入DOM節點，從而阻止任何類型的事件處理。 – Ivan

另外，該線路 'this.svg =的document.getElementById（this.elementId）;' 可以寫成'this.element' – Ivan

如果設置標記名 'SVG'，而在'didInsertElement'運行此'（select（this.element）.call（drag（）。on（'start'，（event）=> console.log（event）））;'這是否工作？ – Ivan

有沒有可能有應用的CSS風格，其中包括pointer-events: none？

如果你看看這個例子的jsfiddle你會看到undraggable應用不能與類拖到圓圈，但它並不影響事件的鉻檢查員說，元素聽

.undraggable { 
    pointer-events: none; 
}

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

來源

2016-05-31 21:34:33 mgraham

不，但很好的建議。我確實添加了'pointer-events：none;'附近/重疊的DOM元素，以確保它們不會干擾。 – ken

d3不觸發的事件

回答

相關問題