D3 with Ace Editor

[Boris Kachscovsky]

I'd like to put an Ace Editor inside of a D3 Visualization, but have had some trouble doing so. Looking around, I haven't seen many people try using both.

I thought the best approach was to create a foreignObject and add an element which can bind to ace - but to no avail. Ace seems to be able to put the code in the HTML document, but it is not visible on the screen.

Here's an example implementation:

https://jsfiddle.net/kfff1taa/1/

Any thoughts?

Thank you!

Boris

[Boris Kachscovsky]

Turns out the solution is to replace:

    .append("xhtml:div")

    .attr("id", "editor")

    .attr('width', '50')

    .attr('height', '50');

with:

    .append("xhtml:div")

    .attr("id", "editor")

    .attr('style', 'width:100%;height:100%');

As seen in this jsfiddle

The reason is that Ace doesn't change size based on the size of its container - so in the previous example, the height was 0. Setting the width and height to 100% aligns it to the original size of the div.