Bubble Chart

[orpitadutta]

I am unable to make bubble chart using ng2-d3-service.`

{

let width: number;
let height: number;
let d3ParentElement: Selection<HTMLElement, any, null, undefined>;
let d3Svg: Selection<SVGSVGElement, any, null, undefined>;
var diameter = 600;
var dataset = [
     {Name= "CROWN",
     Count= 2
      }, {
         Name: "KING",
          Count: 2
      }, {
          Name: "QUEEN",
          Count: 1
      }, {
          Name: "CINDERELLA",
          Count: 2
      }, {
          Name: "PRINCE",
          Count: 3
      }, {
          Name: "PRINCESS",
          Count: 1
      }, {
          Name: "WAND",
          Count: 5
      }];

var color = d3.scaleOrdinal(d3.schemeCategory20);
var bubble = d3.pack()
        .size([diameter, diameter])
        .padding(1);

if (this.parentNativeElement !== null) {
  d3ParentElement = d3.select(this.parentNativeElement);
  var d3Svgdemo = d3ParentElement.select(".chart").append("svg")
        .attr("width", diameter)
        .attr("height", diameter)
        .attr("class", "bubble");
        var nodes = d3.hierarchy(dataset)
        .sum(function(d: any) { return d.Count; });

var node = d3Svgdemo.selectAll(".node")
        .data(bubble(nodes).descendants())
        .enter()
        .filter(function(d){
            return  !d.children
        })
        .append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
          console.log(d.x + "" + d.y)
            return "translate(" + d.x + "," + d.y + ")";
        });

node.append("title")
        .text(function(d:any) {
            return d.data.Name + ": " + d.data.Count;
        });

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

node.append("text")
        .attr("dy", ".3em")
        .style("text-anchor", "middle")
        .text(function(d:any) {
            return d.data.Name.substring(0, d.r / 3) + ": " + d.data.Count;
        });

}

[tomwanzek]

The issues for this repo should be used for bug reports or specific improvement suggestions to its feature set or implementation. If you experience an error message in building your code which indicates a failure of the d3-ng2-service itself, please provide additional error information. Preferably, provide a public repo which reproduces the error. An error with this repo might be, that a D3 feature (method, interface or the like) nominally provided by the service, is actually not properly exported.

In order to manage the scope of this project and in light of limited cycles, I cannot provide general support for how to use D3 and Angular jointly for the vast variety of D3 layouts in this issues log.

For general "how to" questions related to the use of D3 in conjunction with Angular, please use StackOverflow.

For one, the community is broader there for support purposes and others can not only provide guidance, but also benefit from the suggested answers.

Thanks for understanding. 😄

[tomwanzek]

I am going to close this issue for now, as no new information has been provided to point to an actual bug in the d3-gn2-service. Should new information be provided, I will consider re-opening it.