D3.js'de bir kardeş öğesinden sonra ekleme

Question

Kullanıcılar bir çevreye zum yaptığında foreign object eklemek istiyorum. Ben Insert before olduğunu biliyorum:

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) 

} 

ama html içeriği tıklanan daire halinde göründüğü. Bir insert after a specific sibling var, bu yüzden yabancıObject sonra eklenecek?

Robert Longson'un cevabını rahatsız etme. İşleri kanıtlamadan belgede okuduğu bir şeyi aldı. Kod @

:

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

Başka kardeş öğesinden önce içerik eklemek insert kullanabilirsiniz mevcut kardeş eleman ekleme yöntemine ikinci argümandır.

X öğesinden sonra eklemek isterseniz, x öğesinden hemen sonra öğeyi döndüren bir seçici oluşturmanız gerekir.

Mevcut tüm kardeşlerden sonra eklemek istiyorsanız, append'u kullanın.

Bu iki yöntem arasında herhangi bir yere ekleyebilirsiniz.

Answer 2

css "element + element" seçicisini (direct adjacent combinator) kullanabilirsiniz. Diyelim ki "ilk" sağ öğeden sonra "ikinci" elemanı eklemek gerekir diyelim:

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