0

我在使用d3 可视化库的insert() 函数时遇到问题。最好说我不明白如何使用“之前选择器”。我把这里和这里的例子都加红了，但这并没有帮助。

我创建一个 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);

这是一个（非）工作的Jsfile 示例

4

1 回答 1

2

编辑：尝试将 id 传递给之前的选择，如下所示：http: //jsfiddle.net/GCTuD/3/ 

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

您不能按docs中指定的元素标记名称，只能按常量（例如 id）选择：

名称和之前的选择器必须指定为常量，尽管将来我们可能允许插入现有元素或函数以动态生成名称或选择器。

于 2013-05-02T18:19:40.733 回答