Appending various elements to SVG This is the code I currently have for adding various elements inside the svg and then inside a circle. On the text element I added 3 attributes that are the same. But I haven't found a way to remove this to minimize code.    

var node = svg.selectAll("circle")
  .data(nodes)
  .enter()
  .append('g')
  .append("circle")
  .style("fill", function (d) {
    return 'rgb(108,181,205)';
  }).on("click", function (d, i) {
    if (i &lt; 5) {
      d.radius *= 1.1;
      d3.select(this).attr("r", d.radius);
      force.resume();
    }
  }).call(force.drag);


// Adding the text
svg.selectAll('g')
  .append('text')
  .attr("text-anchor", "middle")
  .attr("alignment-baseline", "before-edge")
  .attr('font-family', 'FontAwesome')
  .attr('font-size', function(d) { return '1.9em'})
  .append('tspan')
  .attr('x', '0')
  .attr('dy', '-0.2em')
  .style('fill', 'white')
  .style('display', function(d, i) {
    if (i &lt; 5) {
      return 'block';
    }
    else {
      return 'none';
    } 
  })
  .text(function(d, i) {
    return circlesText[i].icon;
  });

svg.selectAll('g')
  .append('text')
  .attr("text-anchor", "middle")
  .attr("alignment-baseline", "before-edge")
  .attr('font-family', 'FontAwesome')
  .attr('font-size', function(d) { return '0.9em'})
  .append('tspan')
  .attr('x', '0')
  .attr('dy', '0.9em')  
  .style('fill', 'white')
  .style('display', function(d, i) {
    if (i &lt; 5) {
      return 'block';
    }
    else {
      return 'none';
    } 
  })
  .text(function(d, i) {
      return circlesText[i].text[0];
  });

svg.selectAll('g')
  .append('text')
  .attr("text-anchor", "middle")
  .attr("alignment-baseline", "before-edge")
  .attr('font-family', 'FontAwesome')
  .attr('font-size', function(d) { return '0.9em'})
  .append('tspan')
  .attr('x', '0')
  .attr('dy', '1.8em')  
  .style('fill', 'white')
  .style('display', function(d, i) {
    if (i &lt; 5) {
      return 'block';
    }
    else {
      return 'none';
    } 
  })
  .text(function(d, i) {
      return circlesText[i].text[1];
  });  

svg.selectAll('g')
  .append('text')
  .attr("text-anchor", "middle")
  .attr("alignment-baseline", "before-edge")
  .attr('font-family', 'FontAwesome')
  .attr('font-size', function(d) { return '1.9em'})
  .append('tspan')
  .attr('x', '0')
  .attr('dy', '1.8em')  
  .style('fill', 'white')
  .style('display', function(d, i) {
    if (i &lt; 5) {
      return 'block';
    }
    else {
      return 'none';
    } 
  })
  .text(function(d, i) {
      return '\uF056';
  });
The simpler option is to create a local function or two.



var appendText = function(fontSize) {
  return svg.selectAll('g')
    .append('text')
    .attr("text-anchor", "middle")
    .attr("alignment-baseline", "before-edge")
    .attr('font-family', 'FontAwesome')
    .attr('font-size', function(d) { return fontSize });
}

var appendTextSpan = function(fontSize) {
  return appendText(fontSize).
    .append('tspan')
    .style('fill', 'white')
    .style('display', function(d, i) {
      return (i &lt; 5) ? 'block' : 'none';
    });
}

appendTextSpan('1.9em')
  .attr('x', '0')
  .attr('dy', '-0.2em')
  .text(function(d, i) {
    return circlesText[i].icon;
  });

appendTextSpan('0.9em')
  .attr('x', '0')
  .attr('dy', '0.9em')  
  .text(function(d, i) {
      return circlesText[i].text[0];
  });

appendTextSpan('0.9em')
  .attr('x', '0')
  .attr('dy', '1.8em')  
  .text(function(d, i) {
      return circlesText[i].text[1];
  });  

appendTextSpan('1.9em')
  .attr('x', '0')
  .attr('dy', '1.8em')  
  .text(function(d, i) {
      return '\uF056';
  });


The more complex one, but arguably better, would be to inject some CSS into the SVG such that you can just use

svg.selectAll('g')
  .append('text')
  .attr('class', 'label')
  .append('tspan')
  ...


How easy that is to do depends on how much control you have of the enclosing context.