1

假设我有以下 DOM 结构：

div
  > svg
    > defs
    > g
      > rect
      > g
      > g
          <-- I want to insert an element here
      > g
      > g

parentg的子g元素都没有类、id 或任何我可以用作选择器的东西，我无法修改它们，因为它们来自加载到页面中的第 3 方小部件。

到目前为止，我能做的最好的事情就是插入第三个g元素，但这是不可接受的。我想g在当前索引 2 和 3 （或索引 1 和 2 如果你不计算rect）之间向 parent 的孩子添加第 6 个元素。

这是我到目前为止所做的：

var test = d3.selectAll('#continer svg > g > g');
test = d3.select(test[0][2]);
test.append('foreignObject').
    attr('width', 690).attr('height', 500)
    .append('xhtml:body').style('font', '14px "Helvetica Neue"')
    .html('<h1>An HTML Foreign Object in SVG</h1>');

有了这个，我最终得到了以下结构：

div
  > svg
    > defs
    > g
      > rect
      > g
      > g
      > g
        > foreignobject & its children inserted here
      > g

...我明白为什么。我尝试了 D3 的insert方法，使用函数作为指定的第二个参数before，但浏览器一直告诉我：

尝试在不存在的上下文中引用节点。

4

1 回答 1

1

好的，所以这可行，但它有点黑客。在使用 D3 追加后，我使用 jQuery 重新排列元素。如果可能的话，仍然希望看到一个纯 D3 解决方案：

// select the parent g element
var parentG = d3.select('#continer svg > g');

// append a new G element with a nested foreign object
parentG.append('g').attr('id', '__my_custom_id')
    .append('foreignObject').attr('width', 690).attr('height', 500)
    .append('xhtml:body').style('font', '14px "Helvetica Neue"')
    .html('<h1>An HTML Foreign Object in SVG</h1>')
;

// now use jQuery to rearrange the order of the elements
$('#__my_custom_id')
    .insertAfter('#container svg > g > g:nth-child(3)')
    .removeAttr('id')
;
于 2013-10-25T14:17:06.470 回答