试图插入之前另一个SVG元素时使用D3 Java库插入（）函数时出现的问题(Problems whe

我使用的问题插入（）函数的D3可视化图书馆。 不如说我不知道​​如何使用“之前选择”。 我红了的例子在这里和这里 ，但国防部没有帮助。

我创建一个SVG元素和元素追加到它。 然后我追加foreignObject元件的组，并希望以后的foreignObject元件之前插入一个矩形。

这里是我的代码

var body = d3.select("body");

var svg = body.append("svg")
    .attr("width", '100%')
    .attr("height", '100%');

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

var html = group.append("foreignObject")
    .attr("x", 50)
    .attr("y", 25)
    .attr("width", 200)
    .attr("height", 100)
    .append("xhtml:div")
    .style("font", "14px 'Helvetica Neue'")
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");

var rect1 = group.insert("svg:rect", html)
    .attr("rx", 6)
    .attr("ry", 6)
    .attr("x", 5/2)
    .attr("y", 5/2)
    .attr("id", "rect")
    .attr("width", 250)
    .attr("height", 120)
    .style("fill", 'white')
    .style("stroke", d3.scale.category20c())
    .style('stroke-width', 5);

这里是一个（非）工作Jsfidle示例

Answer 1:

编辑 ：尝试通过一个ID，之前选择，如下图所示： http://jsfiddle.net/GCTuD/3/

var rect1 = group.insert("svg:rect", "#foreign_object")

您无法通过元素的标签名选择，只能通过常量（如ID），在指定的文档 ：

选择前的名称，并且必须被指定为常数，但在未来，我们可能会允许现有元素或产生的名称或选择动态功能的插入。

文章来源: Problems when using the insert() function in d3 java library when trying to insert SVG elements before another