SVG Foreign Object 中的 Ace 编辑器

Question

如何添加 Ace Editor to a D3 SVG？这可能吗？这样做的最佳方法是什么？

下面是我尝试创建一个 foreignObject 元素并向其添加编辑器的尝试，但没有成功：

    var w = window.innerWidth,
      h = window.innerHeight;

    var svg = d3.select('body').append('svg')
      .attr('width', w)
      .attr('height', h);

    var group = svg.append("g");

    var radius = w / 4;

    var circle = group.append("circle")
      .attr("cx", w / 2)
      .attr("cy", h / 2)
      .attr("r", radius)
      .attr("fill", "black");

    group.append('foreignObject')
      .attr("x", w / 2 - radius / 2)
      .attr("y", h / 2 - radius / 2)
      .attr("width", radius)
      .attr("height", radius)
      .style("background-color", "red")
      .append("xhtml:div")
      .attr("id", "editor")
      .attr('width', '50')
      .attr('height', '50');

    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

在 html 中，宽度和高度是 CSS 样式，而不是属性。一旦我修复它并使其足够大以供查看，编辑器似乎对我有用，至少在我测试它的 Firefox 中是这样。

    var w = window.innerWidth,
      h = window.innerHeight;

    var svg = d3.select('body').append('svg')
      .attr('width', w)
      .attr('height', h);

    var group = svg.append("g");

    var radius = w / 4;

    var circle = group.append("circle")
      .attr("cx", w / 2)
      .attr("cy", h / 2)
      .attr("r", radius)
      .attr("fill", "black");

    group.append('foreignObject')
      .attr("x", w / 2 - radius / 2)
      .attr("y", h / 2 - radius / 2)
      .attr("width", radius)
      .attr("height", radius)
      .style("background-color", "red")
      .append("xhtml:div")
      .attr("id", "editor")
      .attr('style', 'width: 350px;height: 50px;');


    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

SVG Foreign Object 中的 Ace 编辑器

Ace editor in SVG Foreign Object

javascript

svg

d3.js

ace-editor