Question

我遇到问题，我必须通过选择多个元素来添加父节点。

我有：

<g class="group">
     <g class="Node" id="1">...</g>
     <g class="Node" id="2">...</g>
     <g class="Node" id="3">...</g>
     <g class="Node" id="4">...</g>
</g>

现在在上面的结构中，我必须通过它们的id选择一些具有类Node的元素，并为它们添加父单个父元素。

如果我选择Node 2＆amp;例如3：

<g class="group">
    <g class="Node" id="1">...</g>
    <g class="Grp">
        <g class="Node" id="2">...</g>
        <g class="Node" id="3">...</g>
    </g>
    <g class="Node" id="4">...</g>
</g>

我是否可以通过使用javascript或D3进行此操作。

Answer 1

使用javascript你可以做这样的事情

var els = document.querySelectorAll('.group, #id2, #id3'); // grab the parent and id2/3
var grp = document.createElement('g');                     // create wrapper
grp.className = 'Grp';                                     // give it a class
els[0].insertBefore(grp, els[1]);                          // insert it before id2
grp.appendChild(els[1]);                                   // move id2 to wrapper
grp.appendChild(els[2]);                                   // move id3 to wrapper

.Grp {
  color: red;
}

<g class="group">
  <g class="Node" id="id1">.1.</g>
  <g class="Node" id="id2">.2.</g>
  <g class="Node" id="id3">.3.</g>
  <g class="Node" id="id4">.4.</g>
</g>

Answer 2

为了完整起见，这是（其中一个......）这样做的惯用D3：

WebViewClient.onPageFinished()

关于var group = d3.select(".group"); var newGroup = group.insert("g", "#g2").attr("class", "Grp"); var nodes = group.selectAll("#g2, #g3").remove(); nodes.each(function() { var self = this; newGroup.append(function() { return self }); });方法的好处是，与D3中的几个方法一样，它返回选择。因此，我们可以删除元素但保留对它们的引用，以便我们可以在以后添加它们（在新组内）。

这是演示。 SVG中没有任何内容显示（涂成蓝色），您必须使用浏览器的Web检查器检查SVG以查看组结构：

＆＃13;

remove()

＆＃13;

var group = d3.select(".group");
var newGroup = group.insert("g", "#g2").attr("class", "Grp");
var nodes = group.selectAll("#g2, #g3").remove();
nodes.each(function() {
  var self = this;
  newGroup.append(function() {
    return self
  });
});

＆＃13;

Answer 3

如果您很轻松，可以使用jQuery进行操作。减少代码行数。

$( "#2, #3" ).wrapAll( "<div class='Grp'></div>" );

console.log($(".group").html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<g class="group">
     <g class="Node" id="1">...</g>
     <g class="Node" id="2">...</g>
     <g class="Node" id="3">...</g>
     <g class="Node" id="4">...</g>
</g>

通过在D3中选择多个元素来添加单个父节点

3 个答案: