Добавление при использовании selectAll в d3

Question

Я использую d3 и хочу добавить элемент, который добавляю.

svg.append('g').attr('foo', 'bar')
    .selectAll('rect').data(data)
    .enter().append('rect')
        .attr('class', function(d) { return 'some-class' })
        .attr('y', 0)
        .attr('height', 42)
        .attr('x', function(d) { return d.x); })
        .attr('width', 9001);
        // hot damn would it be cool if I could just .append a span here...

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

svg.append('g').attr('foo', 'bar');
_.each(data, function(d) {
    var rect = $('rect')
        .attr('class', function() { return 'some-class'; })
        .attr('y', 0)
        .attr('height', 42)
        .attr('x', function() { return d.x; })
        .attr('width', 9001)
        .append('<span class="cool-class">Spantastic!</span>');

    svg.append(rect);
});

Я не очень знаком с этим типом вещей, я сделал несколько изменений, угадывая, как это должно быть, но ничего не работает (d3 содержит объект, не имеющий метода indexOf). Есть идеи? Благодарю.

Answer 1

Вы должны быть в состоянии просто добавить .append("span") до конца вашего первого блока кода. Это добавит span элемент к каждому rect,