Combining Enyo 2.4 and D3 JS on the same page

Question

I can render my D3 SVG just fine. It is rendered into its own div on my page. I needed to combine some functionality from Enyo 2.4 and I can render that as well but it overwrites my D3 graph. I am rendering the Enyo code into it's own div. Can the 2 exist on the same page? I know this is a complicated question with lots of variables but I need to basically know has anyone successfully combined both frameworks on the same page and if so how?

Answer 1

I haven't worked with d3 but was able to put together a jsfiddle with both. With other libraries like this, I usually elect to let Enyo do the main layout and then render the other into an Enyo control. I don't know if this will work for you but here's the code I used.

http://jsfiddle.net/ryanjduffy/PfwNL/1/

function buildGears(node) {
    // code taken from http://bl.ocks.org/mbostock/1353700
}

enyo.kind({
    name: "ex.App",
    kind: "FittableRows",
    components: [
        {kind:"onyx.Toolbar", components: [
            {content: "d3 + EnyoJS"}
        ]},
        {name: "d3", kind:"Scroller", fit:true}
    ],
    rendered: enyo.inherit(function(sup) {
        return function() {
            sup.apply(this, arguments);
            if(this.hasNode()) {
                buildGears(this.$.d3.node);
            }
        };
    })
});

new ex.App().renderInto(document.body);