CODEWITHSUNDEEP
angulartypescriptd3.jsstacked-chart
ofey
ofey

Reputation: 3347

d3 stacked bar chart in angular4

Trying to get Bostok's stacked bar chart to run in angular 4.

I did post a question previously on this but again I am running into difficulty with this new error,enter image description here

I've placed the two functions stackMin and stackMax outside ngOnChanges()

  ngOnChanges(){
    console.log("change detected");
    let self = this;
    let d3 = this.d3;
    let d3ParentElement: any;
    let svg: any;
    let width: number = 500;
    let height: number = 150;
    let datas: {month: string, apples: number, bananas: number, cherries: number, dates: number}[] = [];
    let stack: any;
    let series: any;

    let margin: {top: number, right: number, bottom: number, left: number} = {
       top: 20,
       right: 30,
       bottom: 30,
       left: 60
     };

    if (this.parentNativeElement !== null) {
      d3.select("svg").remove();
      svg = d3.select(this.parentNativeElement)
      .append('svg')
      .attr('width', width)
      .attr('height', height);

      datas = [
        {month: "2015, 0, 1", apples: 3840, bananas: 1920, cherries: 960, dates: 400},
        {month: "2015, 1, 1", apples: 1600, bananas: 1440, cherries: 960, dates: 400},
        {month: "2015, 2, 1", apples:  640, bananas:  960, cherries: 640, dates: 400},
        {month: "2015, 3, 1", apples:  320, bananas:  480, cherries: 640, dates: 400}
      ];

      stack = d3.stack()
      .keys(["apples", "bananas", "cherries", "dates"])
      .order(d3.stackOrderNone)
      .offset(d3.stackOffsetNone);

      series = stack(datas);

        var x = d3.scaleBand()
            .domain(datas.map(function(d) {
              return d.month;
            }))
            .rangeRound([margin.left, width - margin.right])
                .padding(0.1);

        var y = d3.scaleLinear()
            .domain([d3.min(series, stackMin), d3.max(series, stackMax)])
            .rangeRound([height - margin.bottom, margin.top]);
      ..............
          }

          function stackMin(serie) {
            return d3.min(serie, function(d) {
              return d[0];
            });
          }

          function stackMax(serie) {
            return d3.max(serie, function(d) {
              return d[1];
            });
          }
        }
       }

Datencia has a great repo on github with examples of various d3 graphs in angular, but unfortunately hasn't yet added a stacked bar chart example.

UPDATE:

Datencia has added to his github repo a section on how to do this since I posted. It can be found here github.com/datencia/d3js-angular2-example/tree/master/

Thanks,

Upvotes: 1

Views: 2710

Answers (1)

chavy
chavy

Reputation: 1068

Try without declaring functions:
.domain([d3.min(data,d => { return d3.min (keys, key => { return d[key]; }); }), d3.max(data, d => { return d3.max(keys, key => { return d[key]; }); })])

Upvotes: 1

Related Questions