Animate D3. js Гистограмма. Снизу наверх. Пожалуйста, проверьте ссылку для справочного изображения

Question

Ниже приведен мой фрагмент кода и проверьте ссылку для вывода, пожалуйста. [Вывод графического демо] [1] (Выходные данные из кода - анимация сверху вниз)
Требуется анимировать столбцы снизу вверх. В настоящее время я использую переход и длительность для анимации, а svgHeight - высота столбца, но почему-то я Я получаю анимацию, как показано в [demo] [1]. Любые предложения или помощь будут оценены. Я уже пытался настроить некоторые атрибуты высоты и y графика.

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
import { transformAll } from '@angular/compiler/src/render3/r3_ast';

@Component({
  selector: 'app-scorebenchmarking',
  templateUrl: './scorebenchmarking.component.html',
  styleUrls: ['./scorebenchmarking.component.css'],
})
export class ScorebenchmarkingComponent implements OnInit {
  dataset = [3, 2, 2, 3, 1, 2, 1, 1, 1, 1];
  colors = [
    'green',
    'green',
    'green',
    'orange',
    'orange',
    'orange',
    'orange',
    'red',
    'red',
    'red'
  ];
  listcompanies = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  svgWidth = 900;
  svgHeight = 300;
  barPadding = 5;
  barWidth = this.svgWidth / this.dataset.length - 30;
  clickObject = 0;

  constructor() {}

  ngOnInit(): void {
    this.buildSvg();
  }

  buildSvg() {
    var svg = d3
      .select('svg')
      .attr('width', this.svgWidth)
      .attr('heigth', this.svgHeight);

    var yScale = d3
      .scaleLinear()
      .domain([0, d3.max(this.dataset)])
      .range([0, this.svgHeight - 30]);

    var barchart = svg
      .selectAll('rect')
      .data(this.dataset)
      .enter()
      .append('rect')
      .attr('class', (d: any, i: any) => {
        return 'rect' + (i + 1);
      })
      .attr('fill', (d: any, i: any) => {
        return this.colors[i];
      })
      .attr('y', (d: any) => {
        return this.svgHeight - yScale(d);
      })
      .attr('height', (d: any) => {
        return 0;
      })
      .attr('width', this.barWidth - this.barPadding)
      .attr('transform', (d: any, i: any) => {
        var translatenum = [this.barWidth * i, 0];
        return 'translate(' + translatenum + ')';
      })
      .on('click', (d: any) => {
        this.clickObject = d;
      })
      .on('mouseover', (d: any, i: any) => {
        d3.select('.rect' + (i + 1))
          .transition()
          .duration('600')
          .attr('opacity', '0.6');
      })
      .on('mouseout', (d: any, i: any) => {
        d3.selectAll('.rect' + (i + 1))
          .transition()
          .duration('600')
          .attr('opacity', '1');
      });

    var temp = d3
      .selectAll('rect')
      .transition()
      .duration(1500)
      .attr('height', (d: any) => {
        return yScale(d);
      });

    var text = svg
      .selectAll('text.no_of_companies')
      .data(this.dataset)
      .enter()
      .append('text')
      .text((d: any) => {
        return d;
      })
      .attr('y', (d: any, i: any) => {
        return this.svgHeight - yScale(d) - 6;
      })
      .attr('x', (d: any, i: any) => {
        return this.barWidth * i + 24;
      })
      .attr('fill', 'black');

    var sizeofaxis = (this.barWidth + this.barPadding) * 10 - 55;

    var line = svg
      .append('line')
      .attr('x1', 0)
      .attr('y1', this.svgHeight)
      .attr('x2', sizeofaxis)
      .attr('y2', this.svgHeight)
      .attr('stroke', 'black');

    var textforAxis = svg
      .selectAll('text.axis_labels')
      .data(this.listcompanies)
      .enter()
      .append('text')
      .text((d: any) => {
        return d;
      })
      .attr('y', (d: any, i: any) => {
        return this.svgHeight + 20;
      })
      .attr('x', (d: any, i: any) => {
        return this.barWidth * i + 24;
      })
      .attr('fill', 'black');
  }
}


>This is my code .
>PLease Help


  [1]: https://i.stack.imgur.com/CSpO9.gif

Answer 1

Установите начальную высоту yScale (d), а высоту перехода - 0. В d3 (0,0) относится к верхнему левому углу.