X-Value Mouseover with Pan & Zoom

Built with blockbuilder.org

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

forked from twlynch's block: X-Value Mouseover with Pan & Zoom

<!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);

}
	
	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>

https://d3js.org/d3.v4.min.js