Ответ 1

Вы не можете добавить несколько дочерних элементов в одну цепочку. Вам нужно будет сохранить родительский выбор в переменной. Это должно делать то, что вы хотите:

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(имя)

Добавляет новый элемент с указанным именем в качестве последнего дочернего элемента каждый элемент в текущем выборе. Возвращает новый выбор содержащий прилагаемые элементы. Каждый новый элемент наследует данные текущих элементов, если таковые имеются, таким же образом, как и для subselections. Имя должно быть указано как константа, хотя в в будущем мы могли бы позволить добавлять существующие элементы или функцию к генерировать имя динамически.

Не стесняйтесь спрашивать о деталях, если что-то неясно.

ИЗМЕНИТЬ

Вы можете добавить несколько дочерних элементов без сохранения выбора в переменной с помощью метода 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);
    });

Ответ 2

Опять же, не существенно отличается, но моим предпочтительным методом было бы использовать "вызов"

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; });​
  });

вам не нужно сохранять какие-либо переменные, и вы можете разделить вызываемую функцию, если хотите использовать аналогичную структуру в другом месте.

Ответ 3

Это не принципиально отличается от ответа nautat, но я думаю, что код можно сделать немного чище, сохранив выбор обновлений, а не выбор ввода, и получить от него выбор ввода для одной операции, которая ему нужна (добавление окружающего div).

Когда вы вставляете или добавляете элемент в выбор enter(), он добавляется к выбору обновлений, с которым вы можете работать позже. Это означает, что вы можете присоединиться к данным, а затем добавить div с выбором ввода, а затем, когда вы добавите его с выбором обновления, вы будете добавлять в div, которые вы добавили в поле ввода:

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>