Iterating over array elements in d3.js to add to button

Question

I'm adding a series of buttons to a page with d3js to form a control panel. Within each button I'd like to iterate over some child elements to form an unordered list within the button (longer term this will turn into a drop down with styling and other chicanery).

The code example below is clearly wrong. One doesn't simply walk into mordor, nor do they simply drop a for loop in the middle of an append. I just can't flip my brain over to remember how to get this done. drilldownValues is an array containing all the elements I'd like to add as list items. I feel like I'm an .each or something away from a eureka moment, but can't make it fit.

In short, the following is wrong, how do I make it right?

    .each(function(d,i) {
        var drilldownValues = d.drilldown;
        d3.select(this)
            .append('ul')
                for (var k = 0; k < drilldownValues.length; k++)
                {
                    .append('li')
                    .text(drilldownValues[k]);
                }
    })

Answer 1

Instead of the loop, use d3's selections. Something along the lines of

d3.select(this).append('ul')
  .selectAll('li').data(d.drilldown).enter()
  .append('li').text(function(d) { return d; })