JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<svg #myChart>
</svg>

CSS

.chart {
    background: #eee;
    padding: 3px;
}

.chart div {
  width: 0;
  transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 5px;
  color: white;
  box-shadow: 2px 2px 2px #666;
}

TypeScript

import {Component, OnInit, AfterViewInit, ViewChild} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';
import {Router} from '@angular/router';
import * as d3 from '@types/d3';

@Component({
    moduleId:module.id,
    selector:'first',
    templateUrl:'first.component.html',
    styleUrls:['first.component.css'],
})

export class FirstComponent implements AfterViewInit{
    @ViewChild('myChart') myChart;
    constructor(private router:Router){}
    ngAfterViewInit(){
        var data = [10,20,30,40,60];
        var chart = d3.select(this.myChart.nativeElement);
        //to our original directive markup bars-chart
        //we add a div with out chart stling and bind each
        //data entry to the chart
        chart.append("div").attr("class", "chart")
         .selectAll('div')
         .data(data).enter().append("div")
         .transition().ease(d3.easeElastic)
         .style("width", function(d) { return d + "%"; })
         .text(function(d) { return d + "%"; });
        //a little of magic: setting it's width based
        //on the data value (d) 
        //and text all with a smooth transition
    }
}