g rendered ouside of svg in d3.js implemented in angular 4 - html

Question

When i try to generate a word cloud using d3,js, the g element is rendered ouside of svg when i give data to it via api call. But when i supply data locally, it is working properly.The angular ts code is below:
import { Component, OnInit } from '#angular/core';
import * as D3 from 'd3';
import { PopulatTopicsService } from '../services/populat-topics.service';
declare let d3: any;
#Component({
selector: 'app-populat-topics',
templateUrl: './populat-topics.component.html',
styleUrls: ['./populat-topics.component.css']
})
export class PopulatTopicsComponent implements OnInit {
constructor(private popularService : PopulatTopicsService){}
//local data- works fine
// data = [
// {text: 'Bob',size:33,cuscolor: '#abaaea'},
// {text: 'Robin',size:12,cuscolor: '#abaaea'},
// {text: 'Anne',size:41,cuscolor: '#abaaea'},
// {text: 'Mark',size:16,cuscolor: '#abaaea'},
// {text: 'Joe',size:39,cuscolor: '#abaaea'}
// ];
network ="FB";
startDate ="01/04/2018";
endDate ="07/04/2018";
brandId ="720";
userId ="20615";
period ="LASTWEEK";
data =[];
wdata = "u gh h xfg fg gf";
ngOnInit() {
this.popularService.wordCloud(this.userId,this.startDate,this.endDate,this.brandId,this.period,this.network).subscribe(res =>
{
console.log(res);
this.data = res;
console.log(this.data['term']);
let cls = this;
// this.data = this.wdata.split(' ').map(function(d) {
// return {text: d, size: cls.getRandom()};
// });
this.setup();
this.buildSVG();
this.populate();
}
);
}
// data = [{'number':1},{'number':2}];
private svg; // SVG in which we will print our chart
private margin: { // Space between the svg borders and the actual chart graphic
top: number,
right: number,
bottom: number,
left: number
};
private width: number; // Component width
private height: number; // Component height
private fillScale; // D3 scale for text color
tempData = [];
private getRandom() {
let cls = this;
let size = 10 + Math.random() * 100;
if(size > 70 && this.tempData.length <= 10) {
this.tempData.push(size);
}
if(this.tempData.length > 10 && size > 14) {
return 12;
}
return size;
}
private setup() {
this.margin = {
top : 10,
right : 10,
bottom: 10,
left : 10
};
this.width = 1200;
this.height = 450;
let minFontSize: number = 18 ;
let maxFontSize: number = 96 ;
this.fillScale = D3.scaleOrdinal(D3.schemeCategory10);
// this.fillScale = ['#abaaea','#abaaea','#abaaea','#abaaea','#abaaea'];
}
private buildSVG() {
this.svg = D3.select("#wordCloud")
.append('svg')
.attr('width', this.width + this.margin.left + this.margin.right)
.attr('height', this.height + this.margin.top + this.margin.bottom)
.append('g')
.attr('transform', 'translate(' + ~~(this.width / 2) + ',' + ~~(this.height / 2) + ')');
}
private populate() {
let fontFace: string = 'Roboto';
let fontWeight: string = 'normal';
let spiralType: string = 'archimedean';
d3.layout.cloud()
.size([this.width, this.height])
.words(this.data)
.padding(0)
.rotate(() => (~~(Math.random() * 2) * 0))
.font(fontFace)
.fontWeight(fontWeight)
.fontSize(d => (d.size))
.spiral(spiralType)
.on('end', () => {
this.drawWordCloud(this.data);
})
.start();
}
private drawWordCloud(words) {
this.svg
.selectAll('text')
.data(words)
.enter()
.append('text')
.style('font-size', d => 20 + 'px')
.style('fill', this.fillScale)
.attr('text-anchor', 'middle')
.attr('transform', d => 'translate(' + [d.x, d.y] + ')rotate(' + d.rotate + ')')
.attr('class', 'word-cloud')
.text(d => {
return d.term;
});
}
}
MY HTML IS GIVEN BELOW:
<div class ="tag_cloud-wrap" id ="wordCloud" ></div>
MY CSS:
.tag_cloud-wrap {
clear: both;
margin: 40px;
text-align: center;
}
JSON DATA obtained throug api call is:
0
:
{term: "#NYIAS", score: "-Infinity", normalizedScore: 0, totalTermFreq: 2, totalDocFreq: 2, …}
1
:
{term: "TORQUE", score: 0, normalizedScore: 0, totalTermFreq: 1, totalDocFreq: 1, …}
2
:
{term: "RS", score: 0, normalizedScore: 0, totalTermFreq: 1, totalDocFreq: 1, …}
3
:
{term: "SPORTBACK", score: 0, normalizedScore: 0, totalTermFreq: 1, totalDocFreq: 1, …}
4
:
{term: "COLOR", score: 0, normalizedScore: 0, totalTermFreq: 1, totalDocFreq: 1, …}
I am assigning term as text to word cloud.
Thanks in advance.