d3으로 중첩 된 (계층 적) 데이터

Question

Bostock의 "Nested Selections"튜토리얼을 읽었지만 중첩 된 데이터를 사용하여 머리를 감쌀 수 없었습니다.

<svg width="500" height="500"> 
 
    <g transform="translate(20,20)"> 
 
    <g transform="translate(0,0)" class="outside_box"> 
 
     <rect x="0" y="0" width="100" height="200" fill="white" stroke="red" stroke-width="10"></rect> 
 
     <text x="50" y="100" text-anchor="middle" alignment-baseline="central" font-size="50">foo</text> 
 
     <g class="inside_box"> 
 
     <g transform="translate(0,0)"> 
 
      <rect x="0" y="0" width="100" height="100" fill-opacity="0.5" stroke="blue"></rect> 
 
      <text x="50" y="50" text-anchor="middle" alignment-baseline="central">foo1</text> 
 
     </g> 
 
     <g transform="translate(0,100)"> 
 
      <rect x="0" y="0" width="100" height="100" fill-opacity="0.5" stroke="blue"></rect> 
 
      <text x="50" y="50" text-anchor="middle" alignment-baseline="central">foo2</text> 
 
     </g> 
 
     </g> 
 
    </g> 
 
    <g transform="translate(100,0)" class="outside_box"> 
 
     <rect x="0" y="0" width="100" height="200" fill="white" stroke="red" stroke-width="10"></rect> 
 
     <text x="50" y="100" text-anchor="middle" alignment-baseline="central" font-size="50">bar</text> 
 
     <g class="inside_box"> 
 
     <g transform="translate(0,0)"> 
 
      <rect x="0" y="0" width="100" height="100" fill-opacity="0.5" stroke="blue"></rect> 
 
      <text x="50" y="50" text-anchor="middle" alignment-baseline="central">bar1</text> 
 
     </g> 
 
     <g transform="translate(0,100)"> 
 
      <rect x="0" y="0" width="100" height="100" fill-opacity="0.5" stroke="blue"></rect> 
 
      <text x="50" y="50" text-anchor="middle" alignment-baseline="central">bar2</text> 
 
     </g> 
 
     </g> 
 
    </g> 
 
    </g> 
 
</svg>

:

var data = [{ 
 
    "id": "foo", 
 
    "row": 0, 
 
    "col": 0, 
 
    "row_size": 200, 
 
    "col_size": 100, 
 
    "modules": [{ 
 
    "id": "foo1", 
 
    "row": 0, 
 
    "col": 0 
 
    }, { 
 
    "id": "foo2", 
 
    "row": 1, 
 
    "col": 0 
 
    }] 
 
}, { 
 
    "id": "bar", 
 
    "row": 0, 
 
    "col": 1, 
 
    "row_size": 200, 
 
    "col_size": 100, 
 
    "modules": [{ 
 
    "id": "bar1", 
 
    "row": 0, 
 
    "col": 1 
 
    }, { 
 
    "id": "bar2", 
 
    "row": 1, 
 
    "col": 1 
 
    }] 
 
}]

그리고 내가 동적으로이 같은 svg을 만들려고 해요 :

나는 다음과 같은 데이터 세트에 내 문제를 단순화했습니다

예제에서 위치 지정, 크기 지정 및 색상은 부적합합니다 (SVG를 이해하기 위해 추가 속성을 추가하기 만했습니다). <g>, <text> 및 <rect>의 그룹화가 매우 중요합니다. 또한 처음부터 SVG를 만들려고합니다 (빈 캔버스). 따라서 뭔가를하려고 시도합니다.

d3.selectAll("g").data(data).enter().append("g")... 

고마워요!

Answer 1

이렇게해야합니다. 나는 그것을 테스트하지 않았기 때문에 오류가있을 수 있지만, 전반적인 구조는 여러분이 수행 한 것입니다.

var svg = d3.select("body").append("svg") // here you'll also want to apply width and height .attr's 
var mainG = svg.append("g") // this you'll also want to translate(20,20) as your mockup suggests 

// Now bind the outer level, to produce a 2-element selection bound to 'data' 
var gOuter = mainG.selectAll("g.outside_box").data(data) 
var gOuterEnter = gOuter.enter().append("g") 
    .attr("class", "outside_box") 
    // also to this you can apply translation as you wish 

gOuterEnter.append("rect") // and set the rect's attributes as needed 
gOuterEnter.append("text") // and set the text's attributes and text as needed 
gOuterEnter.append("g") 
    .attr("class", "inside_box") 

// Now comes the work with the nested data: 
var gModules = gOuterEnter.select(".inside_box").selectAll("g").data(function(d) { 
    // here d is the outer datum, and lets you access 
    // its nested 'modules' array, which is what you want 
    // to return, as instructed by Bostocks "Nested Selections" tutorial 
    return d.modules 
}) 

var gModulesEnter = gModules.enter() 
    .append("g") 

gModulesEnter.append("rect") // and set attributes 
gModulesEnter.append("text") 
    .text(function(m) { 
    // here m is each module's datum, so you can return its id 
    // to set the text to what you want 
    return d.id 
    })