I am trying to create a bubble chart.

[maisum]

I am trying to create a bubble chart.

My data is like:

meds = 
    [
     {"cause": "abc", "medicines": ["def"], "prescription": "234"},
     {"cause": "dec", "medicines": ["def"], "prescription": "234"}
    ]

And I am trying to visualize medicines which is an array within the array of "meds" on the base of prescription. I think the problem is that I am not able to assign data properly in the code which is medicines and prescription in this case due to which is doesn't show anything at all. My code is like:

renderChart() {

this.get_meds().subscribe((medicines) => { 
this.meds = medicines;
let height = 400;
let width = 600;
let color = d3.scaleOrdinal(d3.schemeCategory10);

let bubble = d3.pack()
  .size([width, height])
  .padding(1.5);

let svg = d3.select('#chart')
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("class", "bubble");

let nodes = d3.hierarchy(this.meds)
  .sum(function (d: any) {
    return d.prescription;
  });

let node = svg.selectAll(".node")
  .data(bubble(nodes).descendants())
  .enter()
  .filter(function (d) {
    return !d.children
  })
  .append("g")
  .attr("class", "node")
  .attr("transform", function (d) {
    return "translate(" + d.x + "," + d.y + ")";
  }).style("fill", function (d, i: any) {
    return color(i);
  });

node.append("title")
  .text(function (d: any) {
    return d.medicines + ": " + d.prescription;
  });

node.append("circle")
  .attr("x", function (d) { return d.x; })
  .attr("y", function (d) { return d.y })
  .attr("r", function (d) {
    return d.r;
  })
  .style("fill", function (d, i: any) {
    return color(i);
  });

node.append("text")
  .attr("dy", ".2em")
  .style("text-anchor", "middle")
  .text(function (d: any) {
    return d.data.medicines.substring(0, d.r / 3);
  })
  .attr("font-family", "sans-serif")
  .attr("font-size", function (d) {
    return d.r / 5;
  })
  .attr("fill", "white");

node.append('text')
  .attr("dy", "1.3em")
  .style("text-anchor", "middle")
  .text(function (d: any) {
    return d.data.prescription;
  })
  .attr("font-family", "Gill Sans")
  .attr("font-size", function (d) {
    return d.r / 5;
  })
  .attr("fill", "white");

  }
)
}

[gits]

well - with the code you showed so far its nearly impossible to tell whats going on. obviously you operating on some objects that provide some functions like this.get_meds() which provides an object that itself obviously provides a subscribe method for example and so on - and its not clear what exactly is returned or passed around from where to what.

Besides that a construct like:

function (d: any) {

will produce a syntax error since that is invalid javascript syntax - unless you have some transpile or build step somewhere that can't be seen so far.

PS: test it in the browser while you have the browsers developer console open so you can see what javascript errors are thrown. this will most likely help you to eliminate all those first.