JSFiddle - React, Tailwind, and code Playground

HTML

<div id="display0" style="clear:both; _width: 1600px;">
        <!-- d3 content should be -dynamically- placed here -->
    </div>

CSS

svg {
  font-size: 10px;
}

.axis {
  shape-rendering: crispEdges;
}

.axis path, .axis line {
  stroke: #000;
  fill: none;
  stroke-width: 1px;
}

.x.axis path {
  stroke: #000;
}

.x.axis line { /* defini la grille */
  stroke: #CCC;
  stroke-opacity: .5;
}

.y.axis line { /* defini la grille */
  stroke: #BBB;
  stroke-opacity: .5;
}

path.line { /* defini la courbe */
  fill: none;
  /*stroke: #00F;*/
  stroke-width: 1px;
}

rect.pane {
  cursor: move;
  fill: none;
  pointer-events: all;
}

JavaScript

var parse = d3.time.format("%Y-%m-%d %H:%M").parse,
    format = d3.time.format("%Y");

var svg, area, line, gradient, xAxis, yAxis;
var color = d3.scale.category20();
var Y_val;

function drawGraph (data, container, w, h) {
    var m = [5, 15, 20, 35], // [haut, droite, bas, gauche]
    w = w - m[1] - m[3],
    h = h - m[0] - m[2];

    var x = d3.time.scale().range([0, w]),
        y = d3.scale.linear().range([h, 0]);

    xAxis = d3.svg.axis().scale(x).orient("bottom"),//.tickSize(-h, 0).tickPadding(6),
    yAxis = d3.svg.axis().scale(y).orient("left");//.tickSize(-w).tickPadding(6);


    svg = d3.select(container).append("svg:svg")
        .attr("width", w + m[1] + m[3])
        .attr("height", h + m[0] + m[2])
        .append("svg:g")
        .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

    svg.append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("x", x(0))
        .attr("y", y(1))
        .attr("width", x(1) - x(0))
        .attr("height", y(0) - y(1));

    svg.append("svg:g")
        .attr("class", "y axis")
        .attr("transform", "translate(0,0)");

    // svg.append("svg:path")
    //     .attr("class", "area")
    //     .attr("clip-path", "url(#clip)");
    //    .style("fill", "url(#gradient)");

    svg.append("svg:g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + h + ")");

    svg.append("svg:path")
        .attr("class", "line")
        .style("stroke", function(d) { return color('courbe1'); })
        .attr("clip-path", "url(#clip)");

     hoverLine = svg.append("svg:line")
       .attr("class", "hover-line")
       .style("stroke", function(d) { return color('curssor'); })
         .style('stroke-width', 1)
        .attr("x1", 0).attr("x2", 0) // vertical line so same value on each
         .attr("y1", 0).attr("y2", h); // top to bottom      
     hide it by default
     hoverLine.classed("hide", true);


    var rect = svg.append("svg:rect")
       ...