Как создать <dl> с помощью d3.js

Пример для data был бы полезен. Но вместо добавления в x пробовали ли вы добавлять непосредственно в dt?

x.append('dt').text(d=>d[0]).append('dd')

Вот возможность использования приложения .html (вместо .append):

var data = [
  { "volumeInfo": { "key1": "value1", "key2": "value2" }, "some": "thing" },
  { "volumeInfo": { "key3": "value3", "key4": "value4", "key5": "value5" } }
];

d3.select("body")
  .append('ol')
  .selectAll('li')
  .data(data)
  .enter()
  .append('li')
  .append('dl')
  .html( function(d) {
    // Produces: <dt>key1</dt><dd>value1</dd><dt>key2</dt><dd>value2</dd>
    return Object.entries(d.volumeInfo).map(r => "<dt>" + r[0] + "</dt><dd>" + r[1] + "</dd>").join("");
  });

dt { float: left; width: 100px; }
dd { margin-left: 100px; }

<script src = "https://d3js.org/d3.v5.min.js"></script>

который производит это дерево:

<ol>
  <li>
    <dl>
      <dt>key1</dt>
      <dd>value1</dd>
      <dt>key2</dt>
      <dd>value2</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>key3</dt>
      ...
    </dl>
  </li>
</ol>

Обратите внимание, что это не совсем в духе d3 и затрудняет работу с добавленными дочерними элементами (добавление класса, стиля, других дочерних элементов, ...).

В вашем решении:

x.append('dt')
    .text(d=>d[0]);

x.append('dd')
    .text(d=>d[1]);

Все элементы, добавленные с помощью цикла enter().append(), добавляются к родительскому элементу в том порядке, в котором они добавляются, что для вас работает следующим образом: сначала все dt, затем все dd, как вы видели. Узлы-заполнители (это не добавленные элементы), созданные оператором ввода, не вкладывают дочерние элементы так, как вы можете от них ожидать.

Несмотря на то, что d3 не включает методы для достижения того, что вы ищете, с такими простыми методами, как простой метод selection.append(), желаемое поведение может быть довольно легко достигнуто с помощью стандартных методов d3 и дополнительных шагов или двух. Кроме того, мы можем сами встроить эту функциональность в d3.selection.

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

Первый способ может быть самым простым: использовать функцию selection.each(). При выборе ввода (либо с родительским элементом, либо с введенными заполнителями) используйте метод each, чтобы добавить два отдельных элемента:

var data = [
{name:"a",description:"The first letter"},
{name:"b",description:"The second letter"}
];


d3.select("body")
  .selectAll(null)
  .data(data)
  .enter()
  .each(function(d) {
	var selection = d3.select(this);
	
	// append siblings:
	selection.append("dt")
	  .html(function(d) { return d.name; });
	selection.append("dd")
	  .html(function(d) { return d.description; })
    
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

Но, возможно, более элегантный вариант - покопаться в d3.selection () и поиграть с ним, чтобы дать нам какое-то новое поведение. Ниже я добавил метод selection.appendSibling(), который позволяет вам добавлять парный элемент-брат сразу под каждым элементом в выделенном фрагменте:

d3.selection.prototype.appendSibling = function(type) {
    var siblings =  this.nodes().map(function(n) {
        return n.parentNode.insertBefore(document.createElement(type), n.nextSibling);
    })
    return d3.selectAll(siblings).data(this.data());
}

Он берет каждый узел в выбранном элементе, создает новый парный одноуровневый узел (каждый сразу после исходного узла в DOM) указанного типа, а затем помещает новые узлы в выборку d3 и связывает данные. Это позволяет вам связывать методы с ним для стилизации элемента и т. д. И дает вам доступ к привязанной базе данных. Посмотрите это в действии ниже:

// modify d3.selection so that we can append a sibling
d3.selection.prototype.appendSibling = function(type) {
  var siblings =  this.nodes().map(function(n) {
    return n.parentNode.insertBefore(document.createElement(type), n.nextSibling);
  })
  return d3.selectAll(siblings).data(this.data());
}

var data = [
    {name:"a",description:"The first letter"},
    {name:"b",description:"The second letter"}
    ];

d3.select("body")
  .selectAll(null)
  .data(data)
  .enter()
  .append("dt")
  .html(function(d) { return d.name; })
  .appendSibling("dd")  // append siblings
  .html(function(d) { return d.description; })  // modify the siblings

<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

Конечно, вероятно, будет разумно держать братьев и сестер в отдельных выборках, чтобы вы могли управлять каждым из них для обновлений / входа / выхода и т. д.

Этот метод очень легко применить к вашему примеру, вот вложенное решение, использующее данные, которые структурированы так, как вы ожидаете, и метод appendSibling:

// modify d3.selection so that we can append a sibling
d3.selection.prototype.appendSibling = function(type) {
  var siblings =  this.nodes().map(function(n) {
    return n.parentNode.insertBefore(document.createElement(type), n.nextSibling);
  })
  return d3.selectAll(siblings).data(this.data());
}

var data = [
 {volumeInfo: {"a":1,"b":2,"c":3}},
 {volumeInfo: {"α":1,"β":2}}
]

var items = d3.select("body")
    .append('ol')
    .selectAll('li')
    .data(data)
    .enter()
    .append('li')
    .append('dl')
    .selectAll()
    .data(d=>Object.entries(d.volumeInfo)).enter();
  
var dt = items.append("dt")
  .text(function(d) { return d[0]; })
  
var dd = dt.appendSibling("dd")
  .text(function(d) { return d[1]; })

<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>