css - SVG Text responsive positioning -

so have svg rectangle has svg text inside. svg text being placed in textbox includes things come user's profile. information sent server , want have specific positioning so:

so far i've managed easily... thing people don't fill out profiles (i.e. leave our date of birth, or location) ends creating svg text blank.

<g display="default">    <text x="10" y="30">alexander great</text>    <text x="10" y="40"></text>    <text x="10" y="50">greece </text> </g> 

i can assume have name if date of birth not provided, want textbox smart enough move location right under name.

right enter in specific x , y attributes text node why proving little difficult. there way make positioning more responsive? through css or through svg attributes? generating svg elements through d3.js if need to, set if statements check kind of want avoid this. thanks.

assuming receiving json data profile entries, stuff array non-empty entries , generate text nodes array.

record = {   "name": "alex g.",   "dob": "",   "location": "greece" };  // provides , array of objects both key names , values. var props = d3.entries(record).filter(function(d) {    return d.value.length > 0;  }).map(function(d) {    return d.key + ": " + d.value;  }); 

then can add data dom d3:

d3.select('g[display="default"]')   .data(props)   .enter().append('text')     .attr('x', 10)     .attr('y', function(d, i) {return (i+1) * 10;})     .text(function(d) { return d; });  

edit: incorporated adam pearce's suggestion more idiomatic method of constructing props array.