如何在 d3.js 中的兄弟元素之后插入

Question

当人们放大一个圆圈时，我想插入一个foreign object。我知道有一个Insert before：

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 内容会被点击的圆圈遮住。是否有 insert after a specific sibling 以便在其后插入 foreignObject？

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

@代码：

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();

Answer 1

您可以使用 css“元素+元素”选择器 (direct adjacent combinator)。 假设您需要在元素“first”之后插入元素“second”：

d3.select('body')
    .insert('div', '#first + *')
    .attr('id', 'second');

Answer 2

您可以使用insert 在任何其他兄弟元素之前插入内容，现有的兄弟元素是插入方法的第二个参数。

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

如果您想在所有现有兄弟姐妹之后插入，请使用append。

您可以在这两种方法之间插入任何位置。