Javascript 如何在d3.js中的同级元素后插入

当人们放大一个圆时，我想插入一个

外来物体。我知道在

之前有一个插入：

function zoom(d, i) {
     d3.select("g").insert("foreignObject",'#'+d.name) // insert after a circle in the group
          .attr("width",450)
          .attr("height",450) 
          .attr("id",'f_'+d.name)
          .append("xhtml:div")
          .html(content)

}

但是html内容会被点击的圆圈所掩盖。是否在特定同级之后插入

，以便在其之后插入外来对象

不要打扰罗伯特·朗森的回答。他只是拿了一些他在文件中读到的东西，却没有证明它是有效的

@代码：

var w = 1280,
    h = 800,
    r = 720,
    x = d3.scale.linear().range([0, r]),
    y = d3.scale.linear().range([0, r]),
    node,
    root;

var pack = d3.layout.pack()
    .size([r, r])
    .value(function(d) { return d.size; })

var vis = d3.select("body").insert("svg:svg", "h2")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");

node = root = data;
  console.log(node)
  var nodes = pack.nodes(root);

  vis.selectAll("circle")
      .data(nodes)
    .enter().append("svg:circle")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
  .attr("id",function(d){ return d.name; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", function(d) { return d.r; })
      .on("click", function(d) { return zoom(node == d ? root : d); });

  vis.selectAll("text")
      .data(nodes)
    .enter().append("svg:text")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; })
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
      .text(function(d) { return d.name; });

  d3.select(window).on("click", function() { zoom(root); });


function zoom(d, i) {
  console.log(d)
  var k = r / d.r / 2;
  x.domain([d.x - d.r, d.x + d.r]);
  y.domain([d.y - d.r, d.y + d.r]);

  var t = vis.transition()
      .duration(d3.event.altKey ? 7500 : 750);

  t.selectAll("circle")
      .attr("cx", function(d) { return x(d.x); })
      .attr("cy", function(d) { return y(d.y); })
      .attr("r", function(d) { return k * d.r; });

  t.selectAll("text")
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y); })
      .style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });
  if(!d.children)
  {    
    if(!$('#f_'+d.name).length){ 
  d3.select("g").insert("foreignObject",'#'+d.name)
      .attr("width",450)
      .attr("height",450) 
      .attr("id",'f_'+d.name)
      .append("xhtml:div")
      .html('<img src="https://www.gravatar.com/avatar/60163c0083f4d2a54de2bb079a7211f8?s=128&d=identicon&r=PG&f=1">')
    }
  }
  else
  {
     $("foreignObject").attr("opacity",0); 

  }    
  node = d;
  d3.event.stopPropagation();

var w=1280，
h=800，
r=720，
x=d3.刻度.线性（）.范围（[0，r]），
y=d3.刻度.线性（）.范围（[0，r]），
节点，
根；
var pack=d3.layout.pack（）
.尺寸（[r，r]）
.value（函数（d）{返回d.size；}）
var vis=d3.选择（“主体”）.插入（“svg:svg”，“h2”）
.attr（“宽度”，w）
.attr（“高度”，h）
.append（“svg:g”）
.attr（“转换”、“翻译”（+（w-r）/2+）、“+（h-r）/2+”）；
节点=根=数据；
console.log（节点）
var节点=pack.nodes（根节点）；
vis.selectAll（“圆圈”）
.数据（节点）
.enter（）.append（“svg:circle”）
.attr（“类”，函数（d）{返回d.children？“父”：“子”}）
.attr（“id”，函数（d）{返回d.name；}）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“r”，函数（d）{返回d.r；}）
.on（“单击”，函数（d）{返回缩放（node==d？root:d）；}）；
vis.selectAll（“文本”）
.数据（节点）
.enter（）.append（“svg:text”）
.attr（“类”，函数（d）{返回d.children？“父”：“子”}）
.attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（d）{返回d.y；}）
.attr（“dy”，“.35em”）
.attr（“文本锚定”、“中间”）
.style（“不透明度”，函数（d）{返回d.r>20？1:0；}）
.text（函数（d）{返回d.name；}）；
d3.选择（窗口）.on（“单击”，函数（）{zoom（root）；}）；
功能缩放（d，i）{
控制台日志（d）
var k=r/d.r/2；
x、 域（[d.x-d.r，d.x+d.r]）；
y、 域（[d.y-d.r，d.y+d.r]）；
var t=vis.transition（）
.持续时间（d3.event.altKey？7500:750）；
t、 全选（“圆圈”）
.attr（“cx”，函数（d）{返回x（d.x）；}）
.attr（“cy”，函数（d）{返回y（d.y）；}）
.attr（“r”，函数（d）{返回k*d.r；}）；
t、 选择全部（“文本”）
.attr（“x”，函数（d）{返回x（d.x）；}）
.attr（“y”，函数（d）{返回y（d.y）；}）
.style（“不透明度”，函数（d）{返回k*d.r>20？1:0；}）；
如果（！d.children）
{    
如果（！$（'#f_'+d.name）.length）{
d3.选择（“g”）。插入（“外来对象”，“#”+d.name）
.attr（“宽度”，450）
.attr（“高度”，450）
.attr（“id”，“f_uu”+d.name）
.append（“xhtml:div”）
.html（“”）
}
}
其他的
{
$（“foreignObject”）.attr（“不透明度”，0）；
}    
节点=d；
d3.event.stopPropagation（）；
您可以使用在任何其他同级元素之前插入内容，现有同级元素是insert方法的第二个参数

如果要在元素x之后插入，则需要创建一个选择器，该选择器将在元素x之后立即返回该元素

如果要在所有现有同级之后插入，请使用

在这两种方法之间，您可以在任意位置插入。
您可以使用css“element+element”选择器（）。
假设您需要在元素“first”之后插入元素“second”：

使用第二个参数to insert来选择同级元素之后的元素。我不认为这在
#first
元素之后没有元素的情况下会起作用，但它确实起作用，因为正如前面所解释的，如果选择器不匹配任何元素，那么
insert
将被视为
append
。是的，谢谢s
d3.select('body')
    .insert('div', '#first + *')
    .attr('id', 'second');