선택 부분은

Question

나는 그것의 계층 구조는 다음과 같이 보이는 D3 차트가 col 레이블. 기본적으로 d3.selection은 <svg> 요소를 선택할 수 있고 그 세 번째 요소 인 <g> 요소 만 선택할 수 있습니다. 첫 번째 요소 인 <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>를 반환 태그를 사용하여 나중에 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>