d3 - генерировать вложенные неупорядоченные списки (UL)

Question

Я использую D3 (v4) для создания вложенного неупорядоченного списка (UL) на основе массива объектов. Проблема, с которой я сталкиваюсь, заключается в том, что я не вижу, как создать элемент UL во вложенном выделении.

Я выполняю объединение данных на выделении li.lev2, которое можно использовать для создания требуемого вложенные элементы списка, но как мне создать одного вложенного ul родителя для этих вновь создаваемых li элементов?

По сути, я хочу создать такую ​​структуру HTML:

    <ul>
       <li> row1
          <ul>   <-- how do I create this element?
              <li>value 1</li>
              <li>value 2</li>
              <li>value 3</li>
          </ul>
       </li>

       <li> row2
          <ul>   <-- ...and this one?
              <li>value 1</li>
              <li>value 1</li>
              <li>value 1</li>
          </ul>
       </li>
    </ul>

Надеюсь, приведенный ниже код объяснит лучше.

    function load(data) {

        // V4 general update pattern (using merge)

        // -- FIRST LEVEL OF LIST ITEMS
        // data join (root is an UL element)
        var lev1 = d3.select('#root').selectAll('li.lev1')
            .data(data)

        // enter:
        var lev1_enter = lev1.enter()
            .append('li')
            .attr('class', 'lev1');

        // exit
        lev1.exit()
            .remove();

        // merge enter selection into update selection so
        // we can update all new and existing elements
        lev1 = lev1.merge(lev1_enter)
            .text(function(d) {return d.id;});

        // -- 2ND (NESTED) LEVEL OF LIST ITENS
        // data join:
        lev2_update = lev1.selectAll('li.lev2')
            .data(function(d,i) { return d.values; })

        // enter:
        // HELP: How do I add a single UL element here?
        //       If I call `append('ul')`, I will have mulitple UL,
        //       rather than a signle UL with mulitple LI children.
        lev2_enter = lev2_update.enter()
            //.append('ul')  <-- This will create a UL for every LI...
            .append('li')
            .attr('class', 'lev2');

        lev2_update.exit()
            .remove();

        lev2_update.merge(lev2_enter)
            .text(function(d, i) { return '[' + i + '] ' + d; })
    }

    var data = [
        {'id': 'row1', 'values': [0,1,2]},
        {'id': 'row2', 'values': [3,4,5]},
        {'id': 'row3', 'values': [6,7,8]},
    ];

    load(data);