Question

假设我有以下DOM结构：

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

父g个子g个元素都没有类，id或其他任何我可以用作选择器的内容，我无法修改它们，因为它们来自第三方小部件加载到页面中。

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

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

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，但浏览器一直告诉我：

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

Answer 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')
;

如何使用D3在非常特定的位置插入元素

1 个答案: