var margin = {top: 20, right: 20, bottom: 30, left: 150};
var width = 800, height =200;

var svg = d3.select("svg")
                .append("g")
                 .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");

var x = d3.scaleTime().range([0, this.width]);
var y = d3.scaleLinear().range([this.height, 0]);
x.domain(d3.extent(dataset, (d) => d.date ));
y.domain([0, d3.max(dataset, function(d) { return d.value; })]);

var line = d3.line()
             .x( (d: any) => x(d.date) )
             .y( (d: any) => y(d.value) );

var update = this.svg
            .datum(dataset);

update
        .append("path")
        .merge(update)
        .attr("class", "line")
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("class", "line")
        .attr("d", line);

    update.exit().remove();

var update = this.svg
        .datum(dataset);

update.enter()
        .append("path")
        .merge(update)
        .attr("class", "line")
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("class", "line")
        .attr("d", this.line);

var update = this.svg
        .selectAll("path")
        .datum(dataset);

update.enter()
        .append("path")
        .merge(update)
        .attr("class", "line")
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("class", "line")
        .attr("d", this.line);