D3, 중첩 된 추가 및 데이터 흐름

D3, 중첩 된 추가 및 데이터 흐름

---

드디어 D3를 배우는 과정에서 답을 찾지 못한 문제를 발견했습니다. 내 질문이 도서관에서 관용적으로 생각하지 않기 때문인지, 아니면 현재 내가 알지 못하는 절차 때문인지 확실하지 않습니다. 또한 6 월에 웹 관련 작업을 시작했기 때문에 자바 스크립트에 익숙하지 않습니다.

사용자에게 각각의 이미지가있는 음식 목록을 제공하는 도구를 만들고 있다고 가정 해 보겠습니다. 그리고 각 목록 항목이 다른보기에 연결될 수 있도록 고유 ID로 레이블이 지정되어야한다는 추가 제약 조건을 추가 할 수 있습니다. 이 문제를 해결하기 위해 내 첫 직감의 목록을 작성하는 것입니다 <div>'자신의 각각의 ID, 각이야 div그것의 자신 <p>과 <img>. 결과 HTML은 다음과 같습니다.

<div id="chocolate">
  <p>Chocolate Cookie</p>
  <img src="chocolate.jpg" />
</div>
<div id="sugar">
  <p>Sugar Cookie</p>
  <img src="sugar.jpg" />
</div>

이 도구의 데이터는 개별 JSON이 다음과 같은 JSON 배열에 있습니다.

{ "label": "sugar", "text": "Sugar Cookie", "img": "sugar.jpg" }

한 번에 HTML을 생성하는 방법이 있습니까? div를 추가하는 기본 사례로 시작하면 코드는 다음과 같습니다.

d3.select(containerId).selectAll('div')                                                          
   .data(food)
   .enter().append('div')
   .attr('id', function(d) { return d.label; });

이제 a <div>를 추가하는 <p>것은 어떻습니까? 내 원래 생각은 다음과 같이하는 것이 었습니다.

d3.select(containerId).selectAll('div')                                                          
   .data(food)
   .enter().append('div')
   .attr('id', function(d) { return d.label; })
       .append('p').text('somethingHere');

그러나 이것에 대해 두 가지 문제가 있습니다. (1) div요소 에서 데이터를 가져 오는 방법 과 (2) 하나의 선언적 체인에서 동일한 부모에 여러 자식을 추가하는 방법은 무엇입니까? 에 추가 할 세 번째 단계를 만드는 방법을 생각할 수 없습니다 img.

http://bost.ocks.org/mike/nest/ 를 가리키는 다른 게시물에서 중첩 선택에 대한 언급을 발견했습니다 . 그러나 중첩 된 선택이이 상황에 적합하고 관용적 인 세 개의 청크로 분리되어 있습니까? 아니면 실제로 하나의 선언 체인에서이 구조를 형성하는 잘 구성된 방법이 있습니까? https://github.com/mbostock/d3/wiki/Selections에 언급 된 하위 선택에 대한 방법이있는 것 같지만 그 가설을 테스트 할 수있는 언어에 익숙하지 않습니다.

개념적인 수준에서,이 세 가지 오브젝트 ( div, p, 및 img)보다 한 그룹이 아닌 별도의 개체처럼 취급되고, 코드뿐만 아니라 그 반영한다면 좋을 것이다.

---

하나의 연결 명령 내에 여러 하위 요소를 추가 할 수 없습니다. 부모 선택을 변수에 저장해야합니다. 이것은 당신이 원하는 것을해야합니다 :

var data = [{ "label": "chocolate", "text": "Chocolate Cookie", "img": "chocolate.jpg" },
        { "label": "sugar", "text": "Sugar Cookie", "img": "sugar.jpg" }];

var diventer = d3.select("body").selectAll("div")
    .data(data)
  .enter().append("div")
    .attr("id", function(d) { return d.label; });

diventer.append("p")
    .text(function(d) { return d.text; });

diventer.append("img")
    .attr("src", function(d) { return d.img; });​

작업 바이올린 참조 : http://jsfiddle.net/UNjuP/

당신은 자식 같은 요소 방법을 궁금해 p하거나 img, 부모에 바인딩 된 데이터에 대한 액세스를 얻을 수 있습니다. 데이터는 새 요소를 추가 할 때 부모로부터 자동으로 상속됩니다. 즉, p 및 img 요소는 부모 div와 동일한 데이터가 바인딩됩니다.

이 데이터 전파는 append메서드에 대해 고유하지 않습니다 . 그것은 다음과 같이 발생 selection: 방법 append, insert및 select.

예를 들어 selection.append의 경우 :

selection.append (이름)

현재 선택 항목에있는 각 요소의 마지막 자식으로 지정된 이름의 새 요소를 추가합니다. 추가 된 요소를 포함하는 새 선택을 반환합니다. 각각의 새 요소는 하위 선택을위한 선택과 동일한 방식으로 현재 요소의 데이터를 상속합니다. 이름은 상수로 지정해야하지만, 앞으로는 기존 요소 나 함수를 추가하여 동적으로 이름을 생성 할 수 있습니다.

명확하지 않은 사항이 있으면 세부 사항에 대해 질문하십시오.

---

편집하다

selection.each메서드 를 사용하여 변수에 선택 항목을 저장하지 않고 여러 자식 요소를 추가 할 수 있습니다 . 그런 다음 상위에서 직접 데이터에 액세스 할 수도 있습니다.

var data = [{ "label": "chocolate", "text": "Chocolate Cookie", "img": "chocolate.jpg" },
        { "label": "sugar", "text": "Sugar Cookie", "img": "sugar.jpg" }];

d3.select("body").selectAll("div")
    .data(data)
  .enter().append("div")
    .attr("id", function(d) { return d.label; })
    .each(function(d) {
        d3.select(this).append("p")
          .text(d.text);
        d3.select(this).append("img")
          .attr("src", d.img);
    });

---

다시 말하지만 크게 다르지는 않지만 선호하는 방법은 '전화'를 사용하는 것입니다.

var data = [{ "label": "chocolate", "text": "Chocolate Cookie", "img": "chocolate.jpg" },
        { "label": "sugar", "text": "Sugar Cookie", "img": "sugar.jpg" }];

d3.select("body").selectAll("div")
    .data(data)
  .enter().append("div")
    .attr("id", function(d) { return d.label; })
  .call(function(parent){
    parent.append('p').text(function(d){ return d.text; });
    parent.append('img').attr("src", function(d) { return d.img; });​
  });

변수를 저장할 필요가 없으며 다른 곳에서 유사한 구조를 사용하려는 경우 호출 된 함수를 제외 할 수 있습니다.

---

이것은 nautat의 답변 과 근본적으로 다르지 않지만 입력 선택이 아닌 업데이트 선택 을 저장하고 필요한 하나의 작업에 대해 입력 선택 을 가져옴 으로써 코드를 조금 더 깔끔하게 만들 수 있다고 생각 합니다 (추가 주변 div).

When you insert or append an element into the enter() selection, it's added to the update selection that you can work with afterward. This means that you can join the data, then add a div with the enter selection, and then when you append with the update selection, you'll be appending within the divs that you added in the enter selection:

var cookies = [
  { "label": "sugar", "text": "Sugar Cookie", "img": "sugar.jpg" },
  { "label": "chocolate", "text": "Chocolate Cookie", "img": "chocolate.jpg" }];

var cookie = d3.select("#cookie-jar").selectAll().data(cookies);
cookie.enter().append("div");
cookie.append("p").text(function(d){ return d.text });
cookie.append("img").attr("src",function(d){ return d.img });

#cookie-jar div { border: solid 1px black; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="cookie-jar"></div>

ReferenceURL : https://stackoverflow.com/questions/13203897/d3-nested-appends-and-data-flow