Положить tspan внутри прямоугольника D3JS SVG

Question

Я работаю в проекте визуализации данных с использованием D3JS.

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

маленькие прямоугольники будут содержать информацию. Есть ли у кого-нибудь пример, как это сделать. thakns

Answer 1

есть! На самом деле, вам нужно установить правильное положение для групп.

    var data = [0,1,2,3,4]; // example data
    var selection = svg.selectAll('g').data(data).enter();

    // set position for rects and texts using transform-translate 
    var groups = selection.append('g')
                          .attr('transform', function(d, i) { return 'translate(0,' + i * 35 + ')' });

    groups.append('rect')
          .attr('width', 100)
          .attr('height', 30)
          .attr('fill', 'white')
          .attr('stroke', 'black'); // all rects

    groups.append('text')
          .text((d) => d)
          .attr('font-size', '10px')
          .attr('y', 15); // all texts

И дополнительная ссылка для вас, может быть, это будет полезно.