当在d3 java库中使用insert（）函数时，尝试在另一个之前插入SVG元素时出现问题 [英] Problems when using the insert() function in d3 java library when trying to insert SVG elements before another

问题描述

我在使用d3的插入（）函数时遇到问题可视化库。更好地说，我不明白如何使用前选择器。我举个例子这里和这里，但这个dod不起作用。

I have problems using the insert() function of the d3 visualization library. Better to say I do not understand how to use the "before selector". I red the examples here and here, but this dod not help.

我创建一个svg元素并在其后添加一个元素。

I create an svg element and append an element to it. Then I append foreignObject-element to the group and would like afterward insert an rectangle before the foreignObject-element.

这是我的代码

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示例

推荐答案

前面的ID选择，如下所示： http://jsfiddle.net/GCTuD/3/

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

您不能通过元素标记名称选择，只能使用常量（如id），如 docs ：

You cannot select by element tag name, only by constants (such as an id), as specified in the docs:

名称和before选择器必须指定为常量，但在
中，我们可能允许插入现有元素或函数
来动态生成名称或选择器。

The name and before selector must be specified as constants, though in the future we might allow inserting of existing elements or a function to generate the name or selector dynamically.

这篇关于当在d3 java库中使用insert（）函数时，尝试在另一个之前插入SVG元素时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！