Gruppierung Text und rect

Question

Ich habe mehrere von einem Rects gebildeten Gruppen und einem Text

var dataset = [ 
    {'rect':{ id:1 ,color:'green', posX:20, posY: 20}, 
    'text':{ id:1 ,title: 'Home', texto:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores minima unde magni enim vel atque! Ratione amet reiciendis incidunt, mollitia iste magnam natus, dolores unde nemo consequuntur cumque labore minus!'}, 
    }, 
    ... 
]; 

ich hinzufügen rect und Text zu mehreren Gruppen aber ich den Text nicht sehen kann.

var myGroups = svg.selectAll('g') 
    .data(dataset) 
    .enter() 
    .append("g") 
    .each(function(d) { 
     d3.select(this).append("rect") 
      .attr('class', 'rects') 
      .attr("x", function(d) { 
       return d.rect.posX; 
      }) 
      .attr("y", function(d) { 
       return d.rect.posY; 
      }) 
      .attr("width", 160) 
      .attr("height", 40) 
      .attr("fill", function(d) { 
       return d.rect.color; 
      }) 
     d3.select(this).append("text") 
      .attr('class', 'titles') 
      .attr("x", 200) 
      .attr("y", 300) 
      .attr("width", 160) 
      .attr("height", 40) 
      .style('color', 'white') 
      .style('font-family', 'Roboto') 
      .attr('text', function(d) { 
       return d.text.title 
      }) 

    }); 

Was mache ich falsch?

Answer 1

SVG <text> Elemente haben kein Attribut mit der Bezeichnung text.

Daher statt:

.attr('text', function(d) { 
    return d.text.title 
}) 

es sein sollte:

.text(function(d) { 
    return d.text.title 
}) 

PS: nicht zu Ihrer Frage, aber Sie brauchen nicht, dass each die Rechtecke anhängen und die Texte . Das ist nicht die idiomatische D3. Erstellen Sie einfach eine "enter" Auswahl für Rechtecke und Texte tun:

myGroups.append("rect") 
    .attr('class','rects') 
    //etc... 

myGroups.append("text") 
    .attr('class','titles') 
    //etc...