[Solved]-How can I add text to SVG elements in D3 using the example below-d3.js

As I commented. <text> should be inside <svg> not inside <circle> .. then position it accordingly.. I have transformed text as you have transformed circle ... making inside circle. given color red. You can now edit your code as you wish. Modified js code.

const json = { companyA: 500, companyB: 200, companyC: 150, companyD: 100, companyE: 50 };
const colors = [ '#FF0000', '#03900F', '#0000FF', '#FF00FF', '#00FF00' ];
const diameter = 400;

const processData = data => {
  const obj = data;

  const newDataSet = [];
  for(let prop in obj) {
    newDataSet.push({name: prop, size: obj[prop]});
  }
  return {children: newDataSet};
}

const svg = d3.select('#graph').append('svg')
.attr('width', diameter)
.attr('height', diameter);

const bubble = d3.layout.pack()
.size([diameter, diameter])
.value( d => d.size )
.padding(30);

// generate data with calculated layout values
const nodes = bubble.nodes(processData(json)).filter(function(d) { return !d.children; }); // filter out the outer bubble
const vis = svg.selectAll('circle').data(nodes);

vis.enter().append('circle')
  .attr('transform', d => 'translate(' + d.x + ',' + d.y + ')')
  .attr('r', d => d.r)
  .attr('fill', (d, i) => `${colors[i]}`);
vis.enter().append('text')
  .attr('dx', d => 20)
.attr('transform', d => 'translate(' + d.x + ',' + d.y + ')')
.attr('fill',"red")
  .attr('text-anchor', 'middle')
  .attr('font-size', d => d.r / ((d.r * 10) / 100))
  .attr('dy', d => d.r / ((d.r * 25) / 100))
  .text(d => d.name)