Javascript 选择d3图表的部分

我有一张d3图表，它的层次结构如下：

svg
   g <- this is row labels
   g <- this is col labels
   g <- this is actual chart

---

但我想知道是否还有更方便、更优雅的方式。谢谢。

因为没有答案，我将在这里发布我的解决方案，不确定这是否是最好的方法。目前，我通过对xml进行文本处理来实现：

var source = (new XMLSerializer()).serializeToString(d3.select("svg").node());
var xmldoc = $.parseXML(source);
$(xmldoc).find("g:eq(1), g:eq(2)").remove();
var src2 = (new XMLSerializer()).serializeToString(xmldoc);

var source = (new XMLSerializer()).serializeToString(d3.select("svg").node());
var xmldoc = $.parseXML(source);
$(xmldoc).find("g:eq(1), g:eq(2)").remove();
var src2 = (new XMLSerializer()).serializeToString(xmldoc);

---

另一种方法是修改SVG CSS选择器：

d3.select("svg")

致：

这将返回属于SVG父级的第三个

标记，并避免您以后从XML中删除前两个元素。显示选择的示例：

var svg=d3.选择（“svg”），
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var g1=svg.append（“g”）.attr（“transform”、“translate（50,50）”）；
var g2=svg.append（“g”）.attr（“transform”、“translate（150,50）”）；
var g3=svg.append（“g”）.attr（“transform”、“translate（250,50）”）；
g1.追加（“rect”）.attr（“id”，1）.attr（“width”，25）.attr（“height”，25）.attr（“fill”，“purple”）；
g2.append（“rect”）.attr（“id”，2）.attr（“width”，25）.attr（“height”，25）.attr（“fill”，“blue”）；
g3.append（“rect”）.attr（“id”，3）.attr（“width”，25）.attr（“height”，25）.attr（“fill”，“orange”）；
var thirdGroup=d3.select（“svg>g:nth-child（3）”；
第三组。选择（“rect”）
.transition（）.持续时间（600）.ease（“四元”）
.attr（“宽度”，50）。attr（“高度”，50）
为什么不给g元素类值，然后按类选择。或唯一id，然后按id选择。
d3.select("svg > g:nth-child(3)")