0

i'm working in projet of data visualization using D3JS.

i have to put some information inside a rectangle, and i did that using wrap function to split the content, no i'm looking to put each line (tspan) inside a rectangle. and i don't know how to do that, any help is appreciated for me.enter image description here

the small rectangles will contain informations. does any one have an example how to that. thakns

Ian
  • 33,605
  • 26
  • 118
  • 198
Nas Sim
  • 59
  • 1
  • 10
  • First, according to the its documentation, a `tspan` can only be within a `text` element. Then, could you include some code to show what you already tried and help us giving you guidelines? You will probably find many examples of nested rectangles on the web (including stackoverflow), but helping you will not consist in giving you such a link. – Zim Jul 02 '18 at 14:20
  • I'd highly recommend using https://github.com/d3plus/d3plus-text which will do a lot of the hard work for you. – Ian Jul 02 '18 at 14:27

1 Answers1

0

there! Actually, what you need to do is set right position for groups.

    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

And an additional link for you, maybe it would be helpful.

theykillimmortal
  • 149
  • 1
  • 6