D3 compatibility file for Sencha

D3Container.js

Ext.define('Ext.ux.D3Container', {

    alias: 'plugin.D3Container',

    constructor: function(config) {
        this.initConfig(config);
    },

    init: function(parent) {

        this.D3Container = new Ext.Container({ 
            layout: 'fit'
        });

        d3.select(this.D3Container.innerElement).append("svg:svg");

        parent.add(this.D3Container);

        this.D3Container.innerElement.on({
            painted: 'onPainted',
            touchstart: 'onTouchStart',
            touchend: 'onTouchEnd',
            touchmove: 'onTouchMove',
            scope: this
        });
    },

    onPainted: function(element){
        this.clientRect = element.dom.getBoundingClientRect();
    },

    onTouchStart:function(event) {

        var touch = {
            x: (event.pageX - this.clientRect.left),
            y: (event.pageY - this.clientRect.top)
        };
        
        this.D3Container.fireEvent('touchstart', this.D3Container.innerElement, touch);
    },

    onTouchEnd:function(event) {
        
        var touch = {
            x: (event.pageX - this.clientRect.left),
            y: (event.pageY - this.clientRect.top)
        };

        this.D3Container.fireEvent('touchend', this.D3Container.innerElement, touch);
    },

    onTouchMove:function(event) {
        
        var touch = {
            x: (event.pageX - this.clientRect.left),
            y: (event.pageY - this.clientRect.top)
        };
        
        this.D3Container.fireEvent('touchmove', this.D3Container.innerElement, touch);
    }
});