javascript 如何在 d3.js 中的同级元素之后插入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28249941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert after a sibling element in d3.js
提问by RedGiant
I want to insert a foreign objectwhen people zoom in on a circle. I know there is a Insert before:
我想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)
}
but the html content would be obscured by the clicked circle. Is there a insert after a specific siblingso that the foreignObject would be inserted after it?
但 html 内容会被点击的圆圈遮挡。是否有一个insert after a specific sibling以便在它之后插入foreignObject？
Don't bother Robert Longson's answer. He just took something he read in the document without proving that works.
不要打扰罗伯特朗森的回答。他只是拿了他在文件中读到的东西，却没有证明它有效。
@ Code:
@ 代码：
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();
回答by Kreozot
You can use css "element+element" selector (direct adjacent combinator). Let's say you need to insert element "second" right after element "first":
您可以使用 css“元素+元素”选择器（直接相邻组合器）。假设您需要在元素“first”之后插入元素“second”：
d3.select('body')
.insert('div', '#first + *')
.attr('id', 'second');
回答by Robert Longson
You can use insertto insert the content before any other sibling element, the existing sibling element is the second argument to the insert method.
您可以使用insert在任何其他同级元素之前插入内容，现有的同级元素是 insert 方法的第二个参数。
If you want to insert after element x, you'll need to create a selector that returns the element immediately after x.
如果你想在元素 x 之后插入，你需要创建一个选择器，在 x 之后立即返回元素。
If you want to insert after all existing siblings then use append.
如果要在所有现有兄弟姐妹之后插入，请使用append。
Between those two methods you can insert anywhere.
在这两种方法之间，您可以在任何地方插入。
