Выберите часть d3 диаграммы

Question

У меня есть d3 график его иерархия выглядит следующим образом:

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

Моя проблема, я хочу, чтобы преобразовать реальную диаграмму часть (третий <g> элемент) в файл PNG без строки и col. Так что в принципе мне нужен d3.selection может выбрать элемент <svg> и его третий элемент <g>, первые 2 <g> лишены выбора, поэтому, когда этот выбор преобразуется в строку XML и нарисован на <canvas>, нет ярлыков.

В настоящее время я добиваюсь делая обработку текста через 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); 

, но я хочу знать, если есть более удобные и элегантные пути. Благодарю.

Answer 1

Поскольку ответов нет, я отправлю свое решение здесь, не уверен, что это лучший способ. В настоящее время я добиваюсь делая обработку текста через 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); 

Answer 2

Альтернативой может быть изменить селектор SVG CSS от:

d3.select("svg") 

к:

d3.select("svg > g:nth-child(3)") 

Это возвращает третий <g> тег, принадлежащий родительскому элементу SVG, и избавит вас от необходимости удалять первые два элемента из XML позже. Пример, показывающий выбор:

var svg = d3.select("svg"), 
 
    margin = { 
 
    top: 20, 
 
    right: 20, 
 
    bottom: 30, 
 
    left: 40 
 
    }, 
 
    width = +svg.attr("width") - margin.left - margin.right, 
 
    height = +svg.attr("height") - 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.append("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)"); 
 

 
thirdGroup.select("rect") 
 
    .transition().duration(600).ease("quad") 
 
    .attr("width", 50).attr("height", 50);

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
<svg width="960" height="500"></svg>