D3 Examples - X-Value Mouseover with Pan & Zoom

X-Value Mouseover with Pan & Zoom
d3 V4 extension to X-Value mouseover found here.
Achieved by accessing zoom transform properties x, y and k in mousemove() and zoomed() function.
Happy to offer assistance in reproductions, tweet me at @LynchThomas
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<div id="chart"></div>
<style>
body {
    font: 10px Arial;
    
}
​
.view {
  fill: rgba(255, 255, 255, 0.2);
}
​
.axis path {
  display: none;
}
​
.axis line {
  stroke-opacity: 0.3;
}
​
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}
​
button {
  position: absolute;
  top: 20px;
  left: 80px;
}
​
</style>
<body>
<button>Reset</button>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
var margin = {top: 20, right: 20, bottom: 50, left: 50},
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
var parseTime = d3.timeParse("%d/%m/%Y %H:%M");
    bisectDate = d3.bisector(function(d) { return d.dt; }).left;
    formatValue = d3.format(",.2f"),
    formatCurrency = function(d) { return "£" + formatValue(d); };
    
var x = d3.scaleTime()
          .range([0, width]);
​
var y = d3.scaleLinear()
          .range([height, 0]);
​
var priceSeries = d3.line()
    .defined(function(d) { return d.price != 0; })
    .x(function(d) { return x(d.dt); })
    .y(function(d) { return y(d.price); });
​
svg = d3.select('#chart')
    .append("svg:svg")
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append("svg:g")
    .attr("id","group")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
var focus = svg.append("g") 
               .style("display", "none")    
​
// Get the data
d3.csv("data.csv", function(error, data) {
    if (error) throw error;
    
    // format the data
    data.forEach(function(d,i) {
        d.dt = parseTime(d.dt);
        d.price = +d.price;
    });
​
    // Scale the range of the data
    console.log("Date range: ", d3.extent(data, function(d) { return d.dt; }));
    console.log("Price range: ", d3.extent(data, function(d) { return +d.price; }));    
    x.domain(d3.extent(data, function(d) { return d.dt; }));
    y.domain(d3.extent(data, function(d) { return d.price; }));
    
    var zoom = d3.zoom()
    .scaleExtent([0.75, 15000])
    .translateExtent([[-100000, -100000], [100000, 100000]])
    .on("zoom", zoomed);    
    
    var xAxis = d3.axisBottom(x)
        .ticks((width + 2) / (height + 2) * 5)
        .tickSize(-height)
        .tickPadding(10);
        
    var yAxis = d3.axisRight(y)
        .ticks(5)
        .tickSize(width)
        .tickPadding(- 20 - width);
    
    svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + (height + margin.top + 20) + ")")
      .style("font-size","12px")
      .style("font-family", "sans-serif")
      .style("text-anchor", "middle")
      .text("Date/Time");
      
    svg.append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 0 - margin.left/1.2)
          .attr("x",0 - (height / 2))
          .attr("dy", "1em")
          .style("font-size","12px")
          .style("text-anchor", "middle")
          .text("Price");
​
    var view = svg.append("rect")
        .attr("class", "view")
        .attr("x", 0.5)
        .attr("y", 0.5)
        .attr("width", width - 1)
        .attr("height", height - 1);
​
    var gX = svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
​
    var gY = svg.append("g")
        .attr("class", "axis axis--y")
        .call(yAxis);
        
    svg.append("defs").append("clipPath")
        .attr("id", "clip")
      .append("rect")
        .attr("width", width)
        .attr("height", height);
        
    var chartBody = svg.append("g")
        .attr("clip-path", "url(#clip)");
        
    focus.append("circle")
        .attr("class", "y")
        .style("fill", "none")
        .style("stroke", "steelblue")
        .attr("r", 4)
        .attr("clip-path", "url(#clip)");   
        
    focus.append("text")
          .attr("dy", ".35em")
        .attr("clip-path", "url(#clip)");
          
    chartBody.append("svg:path")
        .data([data])
        .attr("class", "line")
        .attr("d", priceSeries);
        
    svg.append("rect")
        .attr("id","rect")
        .attr("width", width)
        .attr("height", height)
        .style("fill", "none")
        .style("pointer-events", "all")
        .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);
        
    svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x).ticks(0));
          
    svg.append("g")
      .call(d3.axisLeft(y).ticks(0));
     
    d3.select("#rect").call(zoom);
    
    d3.select("button").on("click", resetted);
    
    function mouseDate(scale) {
        var g = d3.select("#group")._groups[0][0]
        var x0 = scale.invert(d3.mouse(g)[0]),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    return d;
    }
    
    function mousemove() {
        var transform = d3.zoomTransform(this);
        var xt = transform.rescaleX(x), yt = transform.rescaleY(y);
        d = mouseDate(xt);
        focus.select("circle.y")
            .attr('cx', function() {
                                    return transform.applyX(x(d.dt));
                                })
            .attr('cy', function() {
                                    return transform.applyY(y(d.price));
                                });
        focus.select("text")
             .text(formatCurrency(d.price))
             .attr('x', function() {
                                    return transform.applyX(x(d.dt))+10;
             })
             .attr('y', function() {
                                    return transform.applyY(y(d.price));
             });
​
    }
    
    function zoomed() {
      
      gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
      gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
      var t = d3.event.transform, xt = t.rescaleX(x), yt = t.rescaleY(y)
      svg.select(".line")
         .attr("d",priceSeries.x(function(d) { return xt(d.dt);})
                            .y(function(d) { return yt(d.price);}));
        //d = mouseDate(x);
        focus.select("circle.y")
             .classed("zoomed", true)
             .attr("id","one")
             .attr('cx', function() {return t.applyX(x(d.dt)); })
             .attr('cy', function() {return t.applyY(y(d.price)); });               
        focus.select("text")
             .text(formatCurrency(d.price))
             .attr('x', function() { return t.applyX(x(d.dt))+10;})
             .attr('y',function() {return t.applyY(y(d.price)); });
    }
    
    function resetted() {
      d3.select("#rect").transition()
          .duration(750)
          .call(zoom.transform, d3.zoomIdentity);
    }
    
});
​
</script>
</body>
​
    