[英]D3.js how to embed selection into a new element
I am wondering if there is a native function in D3.js to create new element around (embedding) the selection.我想知道 D3.js 中是否有一个本机函数来围绕(嵌入)选择创建新元素。 For instance I have a structure like this :例如,我有一个这样的结构:
<path ...></path>
<path ...></path>
<path ...></path>
<path ...></path>
<path ...></path>
And I want to get that :我想得到:
<path ...></path>
<path ...></path>
<g>
<path ...></path>
</g>
<path ...></path>
<path ...></path>
So I just create a new element around my selection.所以我只是围绕我的选择创建一个新元素。
I Think we can do something like : get the selection, detach it, create the element and insert the selection into the new element.我认为我们可以这样做:获取选择,分离它,创建元素并将选择插入到新元素中。 I am sorry if this question has been posted already, I struggle to explain that in English.如果这个问题已经发布,我很抱歉,我很难用英语解释。
Any suggestion appreciate任何建议表示赞赏
Although in D3 there is no such thing as jQuery's .wrap()
, it is fairly easy to do the DOM manipulations yourself.尽管在 D3 中没有像 jQuery 的.wrap()
这样的东西,但自己进行 DOM 操作还是相当容易的。 You need to use two of D3's methods:您需要使用 D3 的两种方法:
selection.insert(name[, before])
to insert the wrapping element at the desired position in the DOM tree. selection.insert(name[, before])
在 DOM 树中的所需位置插入包装元素。 This will return the newly inserted element.这将返回新插入的元素。
selection.append()
to append the element to be wrapped to the newly created wrapping element. selection.append()
将要包装的元素附加到新创建的包装元素。 Note, that there is no need to remove the existing node first before appending it to the wrapping element!请注意,在将其附加到包装元素之前,无需先删除现有节点! A node cannot exists in two points of the DOM tree and, thus, the method Node.appendChild()
which is used by D3 internally takes care of moving the node instead of cloning it.节点不能存在于 DOM 树的两个点中,因此,D3 内部使用的方法Node.appendChild()
负责移动节点而不是克隆它。 In the words of the docs :用文档的话来说:
If the given child is a reference to an existing node in the document,
appendChild()
moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).如果给定的子节点是对文档中现有节点的引用,则appendChild()
将其从当前位置移动到新位置(在将节点附加到其他节点之前,不需要从其父节点中删除节点)。
Chained together you will end up with something like the following:链接在一起,你最终会得到如下内容:
d3.select("svg") .insert("g", "#c") // Insert the wrapper before <path id="c">. .append(() => d3.select("#b").node()); // Append the wrapped element to it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg width="100" height="100"> <path id="a" d="M1 1"></path> <path id="b" d="M1 1"></path> <path id="c" d="M1 1"></path> </svg>
This will produce the following result:这将产生以下结果:
<svg width="100" height="100">
<path id="a" d="M1 1"></path>
<g>
<path id="b" d="M1 1"></path>
</g>
<path id="c" d="M1 1"></path>
</svg>
Alternatively, you could wrap this in a function and extend d3.selection
:或者,您可以将其包装在一个函数中并扩展d3.selection
:
d3.selection.prototype.wrap = function wrap() { const node = this.node(); const g = d3.select(node.parentNode).insert("g", () => node); g.append(() => node); return g; } d3.select("#b").wrap();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.